正式にはCSS変数は「カスケード変数のためのCSSカスタムプロパティ（CSS custom properties for cascading variables）」と定義されています。変数とは一度定義をしておけば何度でも繰り返して使用できるもので、プログラミングで使われることが多いものです。CSSでもこの変数を使うことができるので、基本的な使い方を見ていきましょう。

CSS変数のルール

CSS変数を使うための記述ルールには以下のようなものがあります。

変数の宣言

変数を宣言するには接頭辞に「–（ハイフン2つ）」を付けて、その後に変数名を書いて「:（コロン）」で区切り、値を指定します。変数名は好きな名前を付けて構いません。そして、「:root」を使って定義して変数を使用していきます。

:root {
  --main-color: #033dfc;
  --sub-color: #03a5fc;
}

値には上記のようなカラーコードやpxなどの単位付きの数値や文字列を指定することができます。

変数の呼び出し方

定義した変数を実際に使用するときは、「var(–変数名)」の形式で呼び出すことができます。

.contents {
  width: 850px;
  background: var(--main-color);
}

フォールバックの設定

CSS変数ではフォールバックを記述しておくこともできます。フォールバックの値を記述しておけば、変数が宣言されていなかったり、無効になってしまったりした場合に代わりにこの値が適用されることになります。

.contents {
  background: var(--main-color, #033dfc);
}

このように、変数名のあとにカンマで区切ってからフォールバック値を設定しておきます。

変数の再定義

「:root」で定義した変数は各セレクターで再定義することもできます。

:root {
  --main-color: #033dfc;
}
p {
  color: var(--main-color);
}
.box {
  --main-color: #04b51e;
}
<p>テキスト</p>
<div class="box">
  <p>テキスト</p>
</div>

この場合、外側のp要素のテキストカラーは青色となり、.box内にあるp要素のテキストカラーは緑色で表示されます。

大文字・小文字の区別

定義される変数名は大文字と小文字を区別します。

:root {
  --main-color: #033dfc;
  --MAIN-COLOR: #03a5fc;
}

このように、同じ名前でも大文字と小文字では違う変数名と認識されるので、違った値が返ってきます。

以上が、CSS変数の基本的な使い方となります。

おすすめの記事