Chrome 49 から CSS Variables が使えるみたいなので使ってみます。

CSS Variables は CSS で変数のようなものを扱うことができる仕様です。ような、というのがポイントで Sass や Less で使える変数では再現できない動きをします。

簡単な例

まずは簡単な例から。

/* a.css */

.a { --color: red; }

.b { --color: green; }

* { color: var(--color); }
<!DOCTYPE html>
<meta charset='utf-8'>
<link rel="stylesheet" href="a.css">
<span class="a">a</span>
<span class="b">b</span>

これを Chrome で表示すると a b という文字がそれぞれ赤と緑で表示されます。

-- で始まるスタイルが変数です。 --color: ... で --color という変数に値を設定しています。

設定した値は var(--color) で取り出すことができます。Sass などの変数と違うのは、取り出される値がそれぞれの要素ごとに変化することです。

上の例だと color は .a では red に、 .b では green になります。 Sass などでは .a と .b それぞれで color: $color のようにスタイルを指定する必要がありました。

デフォルト値

変数に値が設定されていなかった場合のデフォルト値を指定することもできます。

/* a.css */

.a { --color: red; }

.b { --color: green; }

* { color: var(--color, blue); }
<!DOCTYPE html>
<meta charset='utf-8'>
<link rel="stylesheet" href="a.css">
<span class="a">a</span>
<span class="b">b</span>
<span class="c">c</span>

var(--color, blue) のように第二引数を指定すると --color が設定されていなかった時、その値が使われます。上の例だと c は --color が設定されていないので blue が使われます。

ちなみに --color: initial のようにすると --color が設定される前と同じ状態になります。

.d { --color: initial; }
<span class="a"><span class="d">d</span></span><!-- 青く表示される -->

更にすすんだ使いかた

実際に使われるパターンとしては同じ値を複数の場所で使う感じだと思います。

/* a.css */

.button {
    background-color: white;
    color: var(--color, gray);
    border: 1px solid var(--color, gray);
}

.red { --color: darkred; }

.green { --color: green; }
<!DOCTYPE html>
<meta charset='utf-8'>
<link rel="stylesheet" href="a.css">
<button class="button red">Red</button>
<button class="button green">Green</button>
<button class="button">Default</button>

草案になっている color 関数と組み合わせれば便利だと思いますが、まだ使えないみたいです。

他には calc と組み合わせても便利に使えそうです。

/* a.css */

.box {
    background: gray;
    margin: var(--unit, 20px);
    padding: var(--unit, 20px);
    width: calc(var(--unit, 20px) * 5);
    height: calc(var(--unit, 20px) * 5);
}

.sm { --unit: 10px; }

.md { --unit: 20px; }

.lg { --unit: 30px; }
<!DOCTYPE html>
<meta charset='utf-8'>
<link rel="stylesheet" href="a.css">
<div class="box">Default</div>
<div class="box sm">Small</div>
<div class="box md">Medium</div>
<div class="box lg">Large</div>
<div class="box" style="--unit: 100px">Special</div>

HTML の style="..." で直接指定もできるので小回りも効く感じです。

さいごに

CSS Variables は Chrome 以外だと Firefox 45 や Safari 9.1 ですでに使える ようです。IE と Edge で使えないので普通の Web ページでは使いづらいかもしれません。

しかし、これまで難しかったことが簡単に実現できるので、使えるところでは積極的に使っていきたいです。覚えておいて損はないと思います。