サーバサイド処理を活用してCSSを書きやすく

このCSSを

ul.menu   { list-style: none; }
ul.menu li { padding-left: 2em; }

こう書けたら？

ul.menu {
    list-style: none;
    li {
        padding-left: 2em;
    }
}

CSS Server-side Pre-processorを使えば、こんな風に見た目と意味が一致したCSSが書けてしまうようだ。

独自文法のCSSをサーバサイドでパースして、通常のCSSに落とし込もうというアイデアである。

このライブラリを使えば、ネスト記法の他にも定数を宣言したり、サーバサイドで別のCSSファイルをimportしたりできるようだ。

定数を使えば、色や幅など共通の値をいちいち置換してまわる手間が省ける。

@server constants{
    colorOne: #336699;
    colorTwo: #3366CC;
}

.foo { color:colorOne; background-color:colorTwo; }
.bar { color:colorOne; background-color:colorTwo; }

importはHTTPリクエスト数の大幅な削減につながる。

@server import url(stylesheetName.css);

普通のCSSと非常に近い文法で書けるのが良い感じだ。しかもmod_rewriteを使うので、あたかも普通のCSSであるかのようにHTMLからlinkするだけで使えてしまうようだ。

PHP、Apache、mod_rewriteで動くので、普段その周辺で開発しているなら試してみてもいいかもしれない。