Minimal nested CSS preprocessor in ~30 lines of JavaScript
/* button.zcss */
:root {
--blue: #8098d4;
}
.button {
background: var(--blue);
border-radius: 4px;
font-size: 18px;
&:hover {
transform: scale(1.1);
}
&[disabled] {
opacity: 0.5
}
.icon {
margin-right: 1em;
}
}Compile zcss to css:
$ cat button.zcss | node zcss > button.cssThis preprocessor implements just two core features inspired by SCSS, Less, and the CSS Nesting draft spec -- implicit nesting, and the ampersand selector.
section {
p {
line-height: 2;
}
}
/* section p {
* line-height: 2;
* }
*/Each property must be on its own line, separate from its selector.
section {
&:hover {
color: purple;
}
}
/* secion:hover {
* color: purple;
* }
*/The ampersand must appear exclusively at the beginning of the selector (similarly to the & in CSS Nesting)