このCSSを

[code lang="css"]
ul.menu { list-style: none; }
ul.menu li { padding-left: 2em; }
[/code]

こう書けたら？

[code lang="css"]
ul.menu {
list-style: none;
li {
padding-left: 2em;
}
}
[/code]

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

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

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

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

[code lang="css"]
@server constants{
colorOne: #336699;
colorTwo: #3366CC;
}

.foo { color:colorOne; background-color:colorTwo; }
.bar { color:colorOne; background-color:colorTwo; }
[/code]

importはHTTPリクエスト数の大幅な削減につながる。
[code lang="css"]
@server import url(stylesheetName.css);
[/code]

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

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