91 lines
2.2 KiB
Markdown
91 lines
2.2 KiB
Markdown
|
# PostCSS Nested
|
|||
|
|
|
|||
|
|
<img align="right" width="135" height="95"
|
|||
|
|
title="Philosopher’s stone, logo of PostCSS"
|
|||
|
|
src="https://postcss.org/logo-leftp.svg">
|
|||
|
|
|
|||
|
|
[PostCSS] plugin to unwrap nested rules like how Sass does it.
|
|||
|
|
|
|||
|
|
```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-atroot`] for `@at-root` at-rule to move nested child
|
|||
|
|
to the CSS root.
|
|||
|
|
* 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]
|
|||
|
|
(requires the `&` and introduces `@nest`).
|
|||
|
|
* [`postcss-nested-props`] for nested properties like `font-size`.
|
|||
|
|
|
|||
|
|
<a href="https://evilmartians.com/?utm_source=postcss-nested">
|
|||
|
|
<img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
|
|||
|
|
alt="Sponsored by Evil Martians" width="236" height="54">
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
[`postcss-atroot`]: https://github.com/OEvgeny/postcss-atroot
|
|||
|
|
[`postcss-current-selector`]: https://github.com/komlev/postcss-current-selector
|
|||
|
|
[`postcss-nested-ancestors`]: https://github.com/toomuchdesign/postcss-nested-ancestors
|
|||
|
|
[`postcss-nested-props`]: https://github.com/jedmao/postcss-nested-props
|
|||
|
|
[`postcss-nesting`]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting
|
|||
|
|
[CSSWG draft]: https://drafts.csswg.org/css-nesting-1/
|
|||
|
|
[PostCSS]: https://github.com/postcss/postcss
|
|||
|
|
|
|||
|
|
|
|||
|
|
## Docs
|
|||
|
|
Read **[full docs](https://github.com/postcss/postcss-nested#readme)** on GitHub.
|