ref: http://dev.w3.org/csswg/css-variables/
普通に変数を定義して参照するだけなら Sass でも使えばいいとおもう。
ウェブアプリとかで色定義やらを別ファイルに分離しておけば、ユーザはそのファイルを差し替えるだけで簡単にカラースキームだけを変更することができる。 たとえば
:root {
var-colorscheme-name: 'monokai';
var-color-background: #272822;
var-color-color: #ffffff;
var-color-keyword: #52daec;
...
}
のような感じで。 色定義以上に細かい設定の場合は JSON の方がいい。 色とか url() とか、CSS として意味のある値だとエディタの補助が効いたりしてわずかに意味がありそう。
spec の note にも書いてある。 現在は、CSS での指定を JavaScript で取得するためには
- 自力で CSS をパース
- JavaScript API を用意しておいてユーザに指定してもらう
のどちらかの方法をとる必要がある。 自力でパースすると遅いし、スタイルシートが同一オリジンでない場合や動的に追加される場合などに対応しにくい。 JS で指定させるのは DRY でない。
特に、CSS の機能の polyfill を作るときには有用で、カスタムプロパティが使えるようになれば、CSS 側では var-flex: auto;
とか var-flow-from: content;
とかかけば、それを JavaScript 側からも取得できる。