Sick of the lack of syntactic sugar for CSS? While many designers are fine with the simplicity of CSS, some developers managing large codebases (such as Zillow's still-terse 2500-line master.css) have been flailing for sanity. Enter CSSx, a syntax-enhancing compiler for CSS. It accepts all currently-valid CSS syntax, so you can use your current CSS chops unaltered, but adds variables and block nesting to the language.
/* sample.cssx */
$red = #f00 /* a comment here*/;
$block = {
div {
padding: 10px;
}
color: $red;
border-width: 1px;
margin: 20px 10px 15px 0;
}
.warning {
color: $red;
}
.content {
.warning {
width: 200px;
}
cite { @rule($block); }
p {
span.tooltip {
color: blue;
}
font-size: 1.1em;
}
.header {
@rule($block);
font-size: 0.8em;
}
font-family: Verdana, Arial, sans-serif;
}
It's still very beta (I'd peg it at 0.1), but please download, give it a spin, and give me feedback on what works/doesn't work for you, or what you'd like to see added. Download CSSx from Google Code.