Firefox31でCSS変数が実装されたらしい

:root { --main-color: #FFFFCC;}

とし、

background-color: var(--main-color);

という風にするとできるようです。

しかし

:root { --size: 20;}

と代入した場合

div#rect { width: var(--size) px; }

では無効な値とされてしまうため、これを実現するためには、

calc という物を使って、

div#rect { width: calc(var(--size) * 1px); }

とする必要があるそうです。

もっといろいろな使い方があるとは思いますが、caniuse.com を見た限りでは、今のところ Firefox31 以降でのみサポートしているようなので、本格的に使うのはまだ先になりそうですが、かなり面白そうです。

興味のある方は是非!!

Wonder Code