いまでもSassなどを使えばCSSの値を変数として保存しておくことができるが、ネイティブのCSSでもできるよ、という話。ちなみにIE11では動かないけど、そろそろいいよね。それ以外のほとんどのブラウザでは機能する。

CSSではいわゆる「変数」──プロパティの値を保存しておくもの──を、カスタムプロパティと呼んでいる。だが、カスタムプロパティでは長いのと、感覚的に理解しづらいような気がするので、ここでは「変数」という用語をそのまま使うことにしている。

変数を使うには、変数を定義する方法と、定義した変数を使用する方法の2つを知っておく必要がある。

変数（カスタムプロパティ）を定義する

変数は次のようにして定義する。次の例では--main-color変数をルート要素に定義している（つまり、どの要素からも使える変数を定義している）。ここで使用している:root は、ルート要素を指すセレクタ（HTMLの場合は事実上htmlとしても同じ）。

:root {
    --main-color: #403d3d;
}

変数名にはどんなものをつけてもよいが、かならず--で始める。また、大文字小文字が区別されることに注意。--variableと、--VARIABLEは別の変数として扱われる。

変数を使用する

定義した変数を使うときは、var()プロパティファンクションを使用する。例を見たほうが簡単。この場合は、background-colorに、変数--main-colorの値をセットしていることになる。

div.container {
    background-color: var(--main-color);
}

うぉー簡単。でしょ？

ちなみにvar()の正式な書式では、カンマ（,）で区切って変数のデフォルト値（変数が参照できなかったときに使用される値）を定義することができるようになっているのだが、使うのかなあ……

var( 変数名, デフォルト値)

参考：

• CSS Custom Properties for Cascading Variables Module Level 1 – W3C
• var() – MDN Web docs