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 v7.0.0 nesting at-rules like @media
will no longer work, as
they are not part of the nesting proposal.
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';
postcssNesting.process(YOUR_CSS );
Or use it as a PostCSS plugin:
import postcss from 'postcss';
import postcssNesting from 'postcss-nesting';
postcss([
postcssNesting()
]).process(YOUR_CSS );
PostCSS Nesting runs in all Node environments, with special instructions for: