CSS の最新の機能に、カスタムプロパティ（CSS Variables）があることは比較的有名になってきました。しかし、このメリットは未だに十分には理解されていません。
CSS Variables は、そのまま CSS での変数と説明されることがありますが、実はにはただの変数以上のメリットがあるのです。
LESS, SASS 等との違い
CSS Variables は、LESS や SASS 等の言語に存在する変数機能が例えとして用いられることも多いように感じます。
しかし、この2つにはかなり大きな違いがあります。それが、コンパイル時に決定されるかです。
LESS や SASS 等では、当然のことながらコンパイル時に値が決定されている必要があります。そのため、外部で定義された変数を使用するためには、import したり、連結することで同じファイルにまとめたりして、コンパイル時に参照できるようにしていなければなりません。よって、例えば実行時に JavaScript から変数の値を変更したりできません。
ただし、CSS Variables が新しい機能であることから、いくつかのデメリットが生じてしまいます。
コンパイル時に決定できないということは、ブラウザの対応が必要であるということです。CSS Variables は多くの最新のブラウザではサポートされている一方、レガシーなブラウザでは動作しません。例えば、IE11 では動きません
また、コンパイル時に決定できないということは、LESS 等との相性が悪いということです。例えば、関数の引数として使用することはできません。あくまで var(prop-name) という形式のまま扱う必要があります。
ただし、これがメリットになるパターンも稀に存在します。例えば、カスタムプロパティの名前を less の変数から作成できることがときどき役に立ちます。
カスケーディングすることの意味
CSS Variables では、定義したカスタムプロパティは CSS のプロパティと同じように振る舞います。すなわち、親から子にカスケーディングします。
この事によって、親要素でデフォルト値を定義しておき、小要素で必要に応じて値を上書きするといった使い方ができます。
CSS Variables をただの変数として認識しているとこの挙動では直感的ではないかもしれません。変数というよりは、カスタムプロパティであるということを意識すると、非常に便利な道具に変化します
CSS のリアクティブ性
CSS はリアクティブなフレームワークに似ています。JavaScript からスタイルを変更すると、即座に必要な部分が再計算され見た目が変更されます。
これは、CSS Variables においても変わりません。変数の値を変更すると、即座に見た目に反映されます。
応用例
CSS Variables (と Vue.js) を用いて簡単なサンプルを作成しました。CSS Variables の使い方のイメージや、カスタムプロパティである意味など、理解の参考にしてください。
See the Pen LKjyOy by z@kuro (@zakuro) on CodePen.
また、私が今作っている Pianoforte UI Framework は、 全体を通して CSS Variables を使用することでデザインのカスタマイズを可能にしています。より実用的な利用例として参考になるかもしれません。
さいごに
CSS Variables はただの変数ではない非常に便利な機能です。IE で動作しなかったりとまだまだ使いにくい側面はありますが、それでも使いたくなる非常に魅力的な機能だと思います
CSS にはまだまだ足りない機能が多いですが、一方で非常に強力になりつつあります。これからの CSS に期待します。