CSSの未来形？　PHPでCSSが作れる DtCSS

ブログ

2010年1月31日

プログラマの端くれである私が CSSを書いていると、もどかしいことがよくあります。「ここが変数に出来たら楽なのに！」とか「ここを、階層構造で記述できたら効率がよいのに！」とか

そんな願いを叶えてくれるのが「DtCSS」。PHPで、CSSを動的生成するライブラリです。

例えば、次の記述。

#define HEADER_COLOR red
h1, h2, h3 {
        color: HEADER_COLOR;
        a:link {
                color: blue;
        }
        a:visited {
                color: darker(blue);
        }
}

CSSと似て異なる記述ですが、これを DtCSSにかけるとこうなります。

h1, h2, h3 {
    color: red;
}

h1 a:link, h2 a:link, h3 a:link {
    color: blue;
}

h1 a:visited, h2 a:visited, h3 a:visited {
    color: #1a1a97;
}

defineで変数（定数）を指定することが出来、それを使って同じ定義を何度も書かなくて済む上、親子関係は階層構造で記述することが出来ます。

さらに「darker（暗くする）」などのファンクションが準備されていて、微妙な色の定義を記述することも。

これは、未来を感じさせてくれるCSSです。ローカルでスタイルが確認できなくなるとか、Dreamweaverのデザインビューが使えなくなるなど、デザイナさんにはちょっと敷居が高いですが、未来のCSSはこんなプログラミング言語的なものに進化するかも？

ダウンロードはこちらからどうぞ。