CSSで変数を使えるようにするための仕様が公開

http://dev.w3.org/csswg/css-variables/

　CSS Variables Module Level 1という名のこの仕様は、長らく登場が待たれていた「CSSで変数を使う」という要望を満たすものです。

　現在の仕様によれば、変数の宣言は'data-'という接頭辞に続けて変数名を記述する、という形で行うようです。例えば、以下は'color'という変数を定義し、値を'#000'としています。

/* 値の宣言 */
:root {
data-color: #000;
};
　この値を使用するには、data()関数に変数名を指定します。

/* 値の使用 */
body { background-color: data(color); }
　「CSSで変数を使う」といった要望を満たすには、現在LESSやSass、Closure StylesheetsといったCSS拡張言語を使用する他ありません。が、CSS Variables Moduleが実装された暁には、標準にのっとったより保守性の高い形でCSSにおける変数を取り扱えることになります。

　仕様はまだまだドラフトの状態ですので、今後も仕様が変更される可能性はありますが、公式のドラフトが登場したことは大きな一歩といえるでしょう。今後も要注目です。