CSS を書いている時に、背景色や文字色など、同じ値が複数の箇所で必要になる場合が出てくることがあると思いますが、そういった場合は CSS 変数（カスタムプロパティ）を使用すると便利です。
今回は、CSS 変数の使い方について紹介します（あと、CSS 変数を定義する際に使う、:rootについての小話も少し）。
目次
CSS 変数とは
CSS 変数とは、CSS で再利用可能な値を定義する仕組みのことです。--（ダブルハイフン）で始まる名前で変数を定義し、var()関数を使ってその値を参照できます。
CSS 変数の使い方
変数を定義
CSS 変数は、まずセレクタを書き、その中で定義することで、そのセレクタ内で使用が可能になります。通常は、グローバルに使用できるようにするため:root で定義するのが一般的です。
:root {
--bg-color: #DDEEFF;
}変数を定義する際の注意点
--で始める（そのあとは任意の名前を付けられる）- 名前には英数字・ハイフン・アンダースコアが使える
- 大文字と小文字は区別される
プロパティ値の指定は、通常の CSS の記述と同じです。
変数を使用
定義した変数はvar()を使って取得します。var(--bg-color)と記述することで、上で定義した#DDEEFFという値が適用されます。
body {
background-color: var(--bg-color); /* #DDEEFF*/
}また、var()は変数が定義されていなかった場合の代替値を指定することもできます。以下のように記述すると、--bg-color-subという名前の変数が定義されていなかった場合には背景色にはgreyが適用されます。
body {
background-color: var(--bg-color-sub, grey);
}変数を使用する際の注意点
- プロパティ名を変数にすることはできない。
- 単位との連結はできない。
:root {
--color: color;
--width: 600;
}
body {
var(--color): #333; /* これはNG */
width: var(--width)px; /* これもNG */
}上のような使い方はできません。
変数の上書き
変数はセレクタごとに再定義することができます。
:root {
--font-color: #333333;
}
body {
color: var(--font-color); /* #333333 */
}
p {
--font-color: #666666;
color: var(--font-color); /* #666666*/
}親要素で再定義した場合は、子要素にも同じ値が適用されます。
:root {
--font-color: #333333;
}
body {
--font-color: #666666;
color: var(--font-color); /* #666666*/
}
p {
color: var(--font-color); /* #666666*/
}CSS 変数の基本的な使い方については以上です。
CSS 変数を使うメリット
- 再利用しやすい :
色やサイズを一括管理できる - テーマの切り替えが簡単 :
ダークモードなどの実装に便利 - JavaScriptとの相性が良い :
JSで動的に変数を変更できる
CSS 変数（カスタムプロパティ）を使うことで、スタイルの管理が柔軟になり、メンテナンスもしやすくなりますね。
ところで、何故 :root で定義するの？
冒頭からずっと:rootについて何の説明もしないまま使ってきましたが、そもそも:rootとはどういったものなのでしょうか。何故、:rootで変数を定義する必要があるのでしょうか。
ページ内のどこでも使えるようにしたい場合、以下のようにhtmlをセレクタとして指定しても良さそうな気がします。実際、これで問題なく動作します。
html {
--bg-color: #DDEEFF;
}違いについて調べてみると、:rootとhtmlとでは、詳細度に違いがあるようです。
:rootは CSS の擬似クラスで、文書を表すツリーのルート要素を選択します。 HTML では:rootは<html>要素を表し、詳細度が高いことを除けばhtmlセレクターと同等です。
:root - CSS: カスケーディングスタイルシート | MDN
また、HTML 以外にも、CSS は SVG や XML で使用されることもあるため、:rootの使用が推奨されているとのこと。
The main reason that :root is suggested is because CSS isn’t only used to style HTML documents. It is also used for XML and SVG files.
【訳】:root が推奨される主な理由は、CSS が HTML ドキュメントのスタイル設定だけに使用されるのではなく、XML ファイルや SVG ファイルにも使用されるためです。
Breaking CSS Custom Properties out of :root Might Be a Good Idea | CSS-Tricks
:rootは、HTML だけを対象として策定されたものではなかったわけですね。そして、初期に使用例として出されたものが:rootを使用して定義されたものであったため、誰もがその通りにし、標準になったとのこと。
さらに調べていくと中々興味深い話も出てきました。Google のエンジニアである tabatkins 氏によると、:rootで定義されていてページ内で変更がない変数は、特別な高速キャッシュに保存されるとのこと（ただし、Chrome での話）。
WordPress でも、本体だけでなくプラグインなどで:rootで変数が定義されていることが多いため、足並みを揃えるために変数の定義は:rootで行ったほうが良さそうですね。
