正式には「カスケード変数のための CSS カスタムプロパティ (CSS custom properties for cascading variables)」と言われるものですが、単に「CSSカスタムプロパティ」や「CSS変数」と呼ばれたり、その他にも「カスケード変数」とも呼ばれることもあります。この記事では、CSSカスタムプロパティで統一することにします。

CSSカスタムプロパティとは？

CSSカスタムプロパティは、CSSで「変数」を扱えるようにしたものです。
従来のCSSでは変数は利用できませんでしたが、多くのブラウザでサポートされたことにより利用可能になりました。（Internet Explorer など一部のブラウザは対応していません）

変数とは？

そもそも変数とはなんでしょう？簡単に言うと文字（プログラムでは文字列といいます）や数値などを格納しておく箱のようなイメージです。

では、箱のようなものに文字列や数値などを入れると何が便利なのでしょう？

あらかじめ箱の中には「赤色」を格納しておきます。この箱は何度も使いまわすことができるので複数の個所に使用したとしましょう。例えば、スタイルシートを書くときに背景色や文字色などを指定するプロパティの値にこの箱を使ったとして、この箱をプロパティの値に指定されたものは、その中身が適用されますので全て「赤色」になります。

この時、箱の中身を「赤色」から「青色」に変えると、値にこの箱を指定した全てのプロパティが「青色」に変更されることになります。

複数の個所に指定した「赤色」を後に「青色」に変えたいと思った時、変数を使っていなかった場合、指定した個所を一つひとつを手作業で「青色」に修正しなくてはなりません。
しかし変数を利用していると変更するのは変数である箱の中身のみで済み、修正の手間をかなり削減することができます。

何度も繰り返し利用する数値やカラーコードなどにはCSSカスタムプロパティを使うことで、変更があった場合にもすべての箇所を修正する必要はなく、定義しておいたCSSカスタムプロパティの中身だけ変更することで対応することができるようになります。
変数（ CSSカスタムプロパティ ）を使うことでメンテナンスが格段によくなります。

CSSカスタムプロパティの書き方

では具体的にCSSカスタムプロパティの使い方を見ていきましょう。

CSSカスタムプロパティの定義のしかた

変数の定義は「:root」セレクタで行います。:rootというのは、「グローバル変数」というものでます。グローバル変数とは、宣言することでコード内のどこからでもアクセスできる変数のことを言います。つまり、:rootをセレクタにした時のCSSカスタムプロパティはどこででもで使用できるようになります。

次のコードはCSSカスタムプロパティの宣言例です。CSSカスタムプロパティの宣言には、CSSカスタムプロパティの名前（変数名）の先頭に「--（ハイフンふたつ）」を付けて記述し、「:（コロン）」で区切ってカスタムプロパティの値を記述します。CSSカスタムプロパティを変数名で呼び出すとこの値がセットされます。

:root {
    --def-color: red;
}

上記の「--def-color」の部分が変数名になります。変数名にする名前は自由につけることができますが、分かりやすく管理しやすい名前をつけるようにしましょう。CSSカスタムプロパティの変数名は大文字・小文字が区別されるので注意が必要です。
「red」の部分が値です。ここは通常の値と同様に指定できます。

CSSカスタムプロパティはカラーコードだけではなく、単位のついた数値や文字列も設定できます。

:root {
    --def-font-size: 14px;
    --def-line-height: 1.75;
    --def-background-color: #ffffff;
}

CSSカスタムプロパティの呼び出し方

変数は「var()」関数で呼び出すことができます。実際に使いたい箇所で「var(--変数名)」と記述することで、定義した値を当てはめられます。

:root {
    --def-color: red;
｝
.element {
    background-color: var(--def-color);
}

CSSカスタムプロパティが取得できなかった時のフォールバック値（代替値）

CSSカスタムプロパティを呼び出すvar() 関数では、変数が未定義であった場合に備えて、第二引数に予備となる「フォールバック値（代替値）」をセットしておくことができます。

フォールバック値とは、CSSカスタムプロパティが宣言されていなかったり、何らかの理由で無効になってしまい適用されなかった場合に変わりに適用されるようにあらかじめ指定しておく代替値のことです。先の例の通り、フォールバック値は省略が可能です。

フォールバック値は、「var(--color, フォールバック値)」のように指定します。

:root {
    --def-color: red;
｝
.element {
    background-color: var(--def-color,#ff0000);
}

この場合、カスタムプロパティ --def-color が無効の場合、「#ff0000」が適応されます。

CSS変数の注意点

プロパティ名は変数で定義することができない

CSSカスタムプロパティでプロパティ名を変数として定義することはできません。
以下の方法では「margin-top: 30px」の指定はできず、コードは無効になります。

:root {
    --mt: margin-top;
}
.element {
    var(--mt): 30px;
}

変数は大文字・小文字の区別する

CSSカスタムプロパティでは大文字と小文字が区別されますので注意が必要です。
次の例で指定された CSSカスタムプロパティはすべて異なるCSSカスタムプロパティとみなされます。

:root {
    --bgcolor: #58a9ef;
    --BGCOLOR: #f89174;
    --bgColor: #ffecd2;
}