CSS変数（カスタムプロパティ）を使えば、より効率的かつ便利なCSSを書くことができます。

CSS変数（カスタムプロパティ）とは

変数とは、文字や数値などのデータ（値）を格納しておく箱のようなものです。
この箱に入れたデータ（値）は、何度でも使い回すことができます。
変数を変えると、その変数を使った他の箇所も変更されます。

 

繰り返し利用する数値やカラーコードなどをCSS変数で定義することで、CSS変数の中身を変えればその変数を使った全ての箇所を変更できます。

CSS変数（カスタムプロパティ）の使い方

CSS変数（カスタムプロパティ）の定義

--変数名: 値;
という形式で定義します。

変数名には自由な名前をつけることが出来ます。

各セレクタに定義することもできますが、「:root」に定義すると、HTML全体で使用できるようになります。

CSS変数（カスタムプロパティ）の呼び出し

var(--変数名)
という形式で呼び出します。

 

フォールバック値のセット
何らかの理由で変数が適用されなかった場合に、予備となる値（フォールバック値）をセットしておく事ができます。

var(--変数名, フォールバック値)
という形式で定義します。

CSS変数を使う際の注意点

変数名にスペースは使用できない

変数名には、英数字、アンダースコア、ハイフンを使用できます。
スペースは使用できません。

大文字と小文字は区別される

例えば、--Key-color と --key-color は異なるCSS変数とみなされます。

プロパティ名をCSS変数にできない

下記のように「color」プロパティを変数に入れても、「color: gray;」の指定をする事はできません。

呼び出し時に単位は書き足せない