1 | # PostCSS Nested [![Build Status][ci-img]][ci]
|
2 |
|
3 | <img align="right" width="135" height="95"
|
4 | title="Philosopher’s stone, logo of PostCSS"
|
5 | src="http://postcss.github.io/postcss/logo-leftp.svg">
|
6 |
|
7 | [PostCSS] plugin to unwrap nested rules like how Sass does it.
|
8 |
|
9 | ```css
|
10 | .phone {
|
11 | &_title {
|
12 | width: 500px;
|
13 | @media (max-width: 500px) {
|
14 | width: auto;
|
15 | }
|
16 | body.is_dark & {
|
17 | color: white;
|
18 | }
|
19 | }
|
20 | img {
|
21 | display: block;
|
22 | }
|
23 | }
|
24 | ```
|
25 |
|
26 | will be processed to:
|
27 |
|
28 | ```css
|
29 | .phone_title {
|
30 | width: 500px;
|
31 | }
|
32 | @media (max-width: 500px) {
|
33 | .phone_title {
|
34 | width: auto;
|
35 | }
|
36 | }
|
37 | body.is_dark .phone_title {
|
38 | color: white;
|
39 | }
|
40 | .phone img {
|
41 | display: block;
|
42 | }
|
43 | ```
|
44 |
|
45 | Use [postcss-current-selector] **after** this plugin if you want to use current selector in properties or variables values.
|
46 |
|
47 | Use [postcss-nested-ancestors] **before** this plugin if you want to reference any ancestor element directly in your selectors with `^&`.
|
48 |
|
49 | See also [postcss-nesting], which implements [Tab Atkin's proposed syntax](https://tabatkins.github.io/specs/css-nesting/) (requires the `&` and introduces `@nest`).
|
50 |
|
51 | There is also [postcss-nested-props] for nested properties like `font-size`.
|
52 |
|
53 | <a href="https://evilmartians.com/?utm_source=postcss-nested">
|
54 | <img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg" alt="Sponsored by Evil Martians" width="236" height="54">
|
55 | </a>
|
56 |
|
57 | [postcss-current-selector]: https://github.com/komlev/postcss-current-selector
|
58 | [postcss-nested-ancestors]: https://github.com/toomuchdesign/postcss-nested-ancestors
|
59 | [postcss-nested-props]: https://github.com/jedmao/postcss-nested-props
|
60 | [postcss-nesting]: https://github.com/jonathantneal/postcss-nesting
|
61 | [PostCSS]: https://github.com/postcss/postcss
|
62 | [ci-img]: https://travis-ci.org/postcss/postcss-nested.svg
|
63 | [ci]: https://travis-ci.org/postcss/postcss-nested
|
64 |
|
65 | ## Usage
|
66 |
|
67 | ```js
|
68 | postcss([ require('postcss-nested') ])
|
69 | ```
|
70 |
|
71 | See [PostCSS] docs for examples for your environment.
|
72 |
|
73 | ## Options
|
74 |
|
75 | ### `bubble`
|
76 |
|
77 | By default, plugin will unwrap only `@media`, `@supports`, `@font-face` and `@document
|
78 | at-rules. You can add your custom at-rules to this list by `bubble` option:
|
79 |
|
80 | ```js
|
81 | postcss([ require('postcss-nested')({ bubble: ['phone'] }) ])
|
82 | ```
|
83 |
|
84 | ### `preserveEmpty`
|
85 |
|
86 | By default, plugin will strip out any empty selector generated by intermediate
|
87 | nesting levels. You can set `preserveEmpty` to `true` to preserve them.
|
88 |
|
89 | ```css
|
90 | .a {
|
91 | .b {
|
92 | color: black;
|
93 | }
|
94 | }
|
95 | ```
|
96 |
|
97 | Will be compiled to:
|
98 |
|
99 | ```css
|
100 | .a { }
|
101 | .a .b {
|
102 | color: black;
|
103 | }
|
104 | ```
|
105 |
|
106 | This is especially useful if you want to export the empty classes with `postcss-modules`.
|