PostCSS Nested

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:

• Use postcss-current-selector after this plugin if you want to use current selector in properties or variables values.
• Use postcss-nested-ancestors before this plugin if you want to reference any ancestor element directly in your selectors with ^&.

Alternatives:

• See also postcss-nesting, which implements CSSWG draft.
• postcss-nested-props for nested properties like font-size.

Docs

Read full docs here.