PostCSS Nested
title="Philosopher’s stone, logo of PostCSS"
src="https://postcss.org/logo-leftp.svg">
PostCSS plugin to unwrap nested rules closer to Sass syntax..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:
.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
- Use
postcss-nested-ancestors
before this plugin if you want
^&
.Alternatives:
- See also
postcss-nesting
, which implements CSSWG draft. postcss-nested-props
for nested properties likefont-size
.
alt="Sponsored by Evil Martians" width="236" height="54">