Directory actions
More options
Directory actions
More options
Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
parent directory.. | ||||
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 like font-size.
Read full docs here.