CSSで変数を使えるようになるかも

去る4月8日に、「CSS Variables」という提案が公開されています。
これが現実になれば、CSSの中で変数を使うことができるようになります。

以下のような書き方が提案されています。

@variables {
  変数名: 値;
}
セレクタ {
  プロパティ: var(変数名);
}

例えば、以下のような書き方ができることになります。

@variables {
  contents_width: 500px;
}
#contents {
  width: var(contents_width);
}

現状でも、スクリプト等でCSSを出力するようにすれば、実質的にCSS内で変数を使うことができます。
例えば、上と同じことをPHPで行うなら、以下のようにすることが考えられます。

<?php
$contents_width = '500px;';
?>
#contents {
  width: <?php print($contents_width); ?>;
}

もっとも、CSS内で変数が使えれば、わざわざスクリプトを持ち出さなくても済むので、便利になると思われます。