2.2 KiB
2.2 KiB
PostCSS Nesting
PostCSS Nesting lets you nest style rules inside each other, following the CSS Nesting specification.
a, b {
color: red;
& c, & d {
color: white;
}
}
/* becomes */
a, b {
color: red;
}
a c, a d, b c, b d {
color: white;
}
NOTICE: In a future version of this project, nesting
at-rules like @media
may be deprecated, as they are not
part of the nesting proposal. In a comment, a CSSWG member expressed
interest in handling nested @media
while handling selector
nesting. So deprecating nested at-rules has been temporarily
delayed.
Usage
Add PostCSS Nesting to your project:
npm install postcss-nesting --save-dev
Use PostCSS Nesting to process your CSS:
import postcssNesting from 'postcss-nesting';
.process(YOUR_CSS /*, processOptions, pluginOptions */); postcssNesting
Or use it as a PostCSS plugin:
import postcss from 'postcss';
import postcssNesting from 'postcss-nesting';
postcss([
postcssNesting(/* pluginOptions */)
.process(YOUR_CSS /*, processOptions */); ])
PostCSS Nesting runs in all Node environments, with special instructions for:
Node | Webpack | Create React App | Gulp | Grunt |
---|