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.