PostCSS plugin to unwrap nested rules closer to Sass syntax.
```css .phone { &_title { width: 500px; @media (max-width: 500px) { width: auto; } body.is_dark & { color: white; } } img { display: block; } }
.title { font-size: var(--font);
@at-root html { --font: 16px; } } ```
will be processed to:
```css .phone_title { width: 500px; } @media (max-width: 500px) { .phone_title { width: auto; } } body.is_dark .phone_title { color: white; } .phone img { display: block; }
.title { font-size: var(--font); } html { --font: 16px; } ```
Related plugins:
postcss-current-selector] after this plugin if you want
to use current selector in properties or variables values.postcss-nested-ancestors] before this plugin if you want
to reference any ancestor element directly in your selectors with ^&.Alternatives:
postcss-nesting], which implements CSSWG draft.postcss-nested-props] for nested properties like font-size.
Read full docs here.