6.0.1 • Published 1 year ago
postcss-nested v6.0.1
PostCSS Nested
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 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 likefont-size
.
Docs
Read full docs here.
6.0.1
1 year ago
6.0.0
1 year ago
5.0.6
3 years ago
5.0.5
3 years ago
5.0.4
3 years ago
5.0.3
3 years ago
5.0.2
3 years ago
5.0.1
4 years ago
5.0.0
4 years ago
4.2.3
4 years ago
4.2.2
4 years ago
4.2.1
4 years ago
4.2.0
4 years ago
4.1.2
5 years ago
4.1.1
5 years ago
4.1.0
6 years ago
4.0.0
6 years ago
3.0.0
6 years ago
2.1.2
7 years ago
2.1.1
7 years ago
2.1.0
7 years ago
2.0.4
7 years ago
2.0.3
7 years ago
2.0.2
7 years ago
2.0.1
7 years ago
2.0.0
7 years ago
1.0.1
7 years ago
1.0.0
9 years ago
0.3.2
9 years ago
0.3.1
9 years ago
0.3.0
9 years ago
0.2.2
9 years ago
0.2.1
9 years ago
0.2.0
9 years ago
0.1.0
9 years ago