CSS変数入門：変数で変わるCSSの世界

CSS変数とは

CSS変数とは

CSS変数とはCSSのプロパティの値を変数として定義し再利用できるようにする機能です。
CSS変数はカスタムプロパティとも呼ばれます。
CSS変数を使うとコードの可読性やメンテナンス性が向上します。

CSS calc()関数とは、CSSのプロパティに計算式を指定できる関数です。例えば、要素の幅をパーセントからピクセルを引いた値にしたり、異なる単位を組み合わせたりできます。calc()関数は、様々なデータタイプに対応しています。

CSS変数の宣言と使い方

CSS変数は、以下のように宣言し使うことできます。

/* 変数を宣言するセレクタ */
:root {
  /* プライマリーカラーとして赤色を定義 */
  --primary-color: #ff0000;
  /* セカンダリーカラーとして緑色を定義 */
  --secondary-color: #00ff00;
  /* フォントサイズとして16pxを定義 */
  --font-size: 16px;
}

/* 変数を使用するセレクタ */
h1 {
  /* プライマリーカラーを文字色に適用 */
  color: var(--primary-color);
  /* フォントサイズを2倍に計算して適用 */
  font-size: calc(var(--font-size) * 2);
}

p {
  /* セカンダリーカラーを文字色に適用 */
  color: var(--secondary-color);
  /* フォントサイズをそのまま適用 */
  font-size: var(--font-size);
}

See the Pen css-val1 by k2zo_o (@k2zo_o) on CodePen.

上記の例では、ルート要素（:root）に対して、
　–primary-color,
　–secondary-color,
　–font-size
という3つの変数を宣言しています。
変数名は、–で始まり、変数の値は、var()関数で参照できます。

CSS変数のスコープとカスケード

CSS変数は、宣言された要素とその子孫要素に対して有効です。
これをスコープと呼びます。スコープ内では、同じ変数名を再定義することで値を上書きできます。これをカスケードと呼びます。

/* 変数を宣言するセレクタ */
:root {
  /* プライマリーカラーとして赤色を定義 */
  --primary-color: #ff0000;
}

div {
  /* プライマリーカラーを青色に再定義 */
  --primary-color: #0000ff;
}

/* 変数を使用するセレクタ */
h1 {
  color: var(--primary-color); /* 赤色になる */
}

div h1 {
  color: var(--primary-color); /* 青色になる */
}

See the Pen css-val2 by k2zo_o (@k2zo_o) on CodePen.

上記の例では、ルート要素に対して–primary-colorを赤色に宣言していますが、div要素に対して–primary-colorを青色に再定義しています。そのため、div要素内のh1要素は青色になります。