CSS変数とは
CSS変数とはCSSのプロパティの値を変数として定義し再利用できるようにする機能です。
CSS変数はカスタムプロパティとも呼ばれます。
CSS変数を使うとコードの可読性やメンテナンス性が向上します。
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要素は青色になります。
CSS変数のメリット
CSS変数を使うことで得られるメリットは以下の通りです。
- コードの重複を減らし可読性やメンテナンス性を向上させることができる。
- CSSの値を一元的に管理し変更が簡単になる。
- CSSの値を動的に変更できる。
- CSSの仕様で定義されているためブラウザの互換性が高い。
- CSSプリプロセッサ(SassやLessなど)に依存しなくても変数機能を利用できる。
より詳しい情報が必要な方はMDNサイト等をご利用ください。