diff options
| author | Philipp Tanlak <philipp.tanlak@gmail.com> | 2025-11-24 20:54:57 +0100 |
|---|---|---|
| committer | Philipp Tanlak <philipp.tanlak@gmail.com> | 2025-11-24 20:57:48 +0100 |
| commit | b1e2c8fd5cb5dfa46bc440a12eafaf56cd844b1c (patch) | |
| tree | 49d360fd6cbc6a2754efe93524ac47ff0fbe0f7d /node_modules/postcss-nested/README.md | |
Docs
Diffstat (limited to 'node_modules/postcss-nested/README.md')
| -rw-r--r-- | node_modules/postcss-nested/README.md | 86 |
1 files changed, 86 insertions, 0 deletions
diff --git a/node_modules/postcss-nested/README.md b/node_modules/postcss-nested/README.md new file mode 100644 index 0000000..7e78ec8 --- /dev/null +++ b/node_modules/postcss-nested/README.md @@ -0,0 +1,86 @@ +# 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 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`. + +<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-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 **[here](https://github.com/postcss/postcss-nested#readme)**. |