summaryrefslogtreecommitdiff
path: root/node_modules/postcss-nested/README.md
diff options
context:
space:
mode:
authorPhilipp Tanlak <philipp.tanlak@gmail.com>2025-11-24 20:54:57 +0100
committerPhilipp Tanlak <philipp.tanlak@gmail.com>2025-11-24 20:57:48 +0100
commitb1e2c8fd5cb5dfa46bc440a12eafaf56cd844b1c (patch)
tree49d360fd6cbc6a2754efe93524ac47ff0fbe0f7d /node_modules/postcss-nested/README.md
Docs
Diffstat (limited to 'node_modules/postcss-nested/README.md')
-rw-r--r--node_modules/postcss-nested/README.md86
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)**.