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.
No comments:
Post a Comment