自分はまだカスタムプロパティを実務で使ったことがないんですが、IE亡き今、使う機会が増えてくる可能性もあるので改めておさらいしておきます。

基本的な使用方法

CSSのカスタムプロパティは、使うだけなら超簡単です。

変数の定義

CSSで変数を定義するには、変数名の前に「--」を付けます。ちなみに変数名は大文字小文字が区別されるので注意しましょう。

定義する値は、CSSプロパティで使われている値なら何でもOK。

:root{
	--xxx: #000;
	--yyy: 100px;
	--zzz: 20px auto;
}

このように、HTML全体で変数を使い回したい場合は文書のルート要素を表す擬似クラスである:rootに変数を定義するのが便利です。ちなみにhtml{}内に定義しても同じ結果が得られますが、優先度が違うらしい。

変数の使用

変数を使用するときは、var(--変数名)のように記述します。

See the Pen Untitled by Leo_8192 (@Leo_8192) on CodePen.

div{
	margin: var(--zzz);
	width: var(--yyy);
	height: var(--yyy);
	background: var(--xxx);
}

こんな感じで、使うのも超簡単です。

代替値の設定

変数には代替値を設定することも可能で、定義されていない変数を参照した場合にはそちらが使用されます。

div{
	width: var(--xxx,200px); /* 変数--xxxが定義されていなかったら200pxをセット */
	background: var(--yyy,#000); /* 変数--yyyが定義されていなかったら#000をセット */
}

まぁ定義されていない変数を使おうとしているっていうのはイレギュラーな状況だと思いますんで、あまり使うことは無さそうな印象です。

カスタムプロパティの活用方法

カスタムプロパティは、CSS内で同じ値を何度も使っているような状況の時に活躍します。

テーマカラーの変数化

例えば有名な使い方ですが、サイトのメインカラーを変数として定義しているサイトは多いでしょう。こうすることによって、サイト全体の色を変更する際は変数の値のみを書き換えればいいので保守性が高まります。

JavaScriptでの操作

CSSで定義した変数はJavaScriptで取得・操作が可能です。パッと思い付く使い方としては、ボタンクリックで変数の中身を置き換えてサイト全体をダークテーマに変更する、とかですかね…クラスの変更等でも実装できますが、変数を書き換えるという方法のほうがスマートな気はします。

正直ここらへんはまだ手探りな人が多いので、誰かが画期的な使い道を発見してくれるのを待っています（他人任せ）。

Sassとの違い

CSSのカスタムプロパティの話になると必ずSassとの比較になるんですが、どちらも一長一短です。ちなみに個人的にはSassのほうが好き。

ザックリ書くとこんな感じです。変数を使うだけならCSSのカスタムプロパティで十分ですが、それ以外の機能にも魅力を感じるならSass環境を整えるのもアリ。

まとめ

めちゃくちゃ薄っぺらい内容になってしまったんですが、カスタムプロパティの使い方は以上です。

既にSass等の拡張言語を使っている人にはメリットが薄いんですが、複数人が携わっているプロジェクトだとSassを使えない人もいると思いますんで、生のCSSでこういう複雑なことが出来るようになってきているというのはやはり嬉しいですね。

これからもどんどん新機能が追加されていくのを期待しましょう（ネスト使いたい）。