CSSで変数の基本的な使い方
CSS変数とは？
CSS変数（またはCSSカスタムプロパティ）は、CSS3仕様で定義された機能の一つです。
CSS変数を利用すると動的で再利用可能な値を定義することができます。
ユースケース
CSS変数が有効なユースケースの一例です。
特に太字のユースケースにCSS変数はオススメできると思います。
- 同じ文字色や背景色のカラーコードを何回も書くのめんどくさい
- 同じborderのスタイルを何回も書くのめんどくさい
- 検索&置換より確実かつ簡単に、一括で変更加えられるようにしときたい
- 特定のカラーコードや文字サイズなどに一意な名前をつけて混乱を避けたい
CSS変数の基本的な使用方法
CSS変数は以下の手順で使用できます。
- CSS変数を定義する
- CSS変数を呼ぶ（使う）
【補足】変数とは？
変数とは文字列や数値の値に名前をつけて保管する箱です。
数学の授業でやった方程式のXのようなイメージに近いです。
1.CSS変数を定義する
ではさっそくCSS変数を定義していきましょう。
定義にも2種類あることに注意です。
ここではそれぞれを全体的定義と限定的定義とします。
CSS変数を全体的定義する【大体はこれでOK】
:rootという擬似クラスにCSS変数を定義することでどこでも使える変数となります。
基本的にはこの定義方法でCSS変数でやりたいことのほとんどをカバーできるかと思います。
/* 擬似クラスrootを使うことでグローバルに使える */
:root {
/* 変数名: 値 */
--primary-color: #007bff;
}
CSS変数を限定的定義する【一応こういうのもある】
セレクタで特定の要素を指定してからCSS変数を定義することも可能です
この場合は、指定した要素内でのみ変数を呼び出すことができ、他の要素では出来ません。↓
.element {
--primary-color: #007bff;
}
2. CSS変数を呼ぶ（使う）
CSS変数の定義が完了したらあとは呼び出すことで値を適用させることが出来ます。
（変数を「呼ぶ」というのはプログラミング用語的な言い方です。ピント来ない方は「呼ぶ=使う」という解釈でOKです）
呼び出すときはvar(--**)というような記法が必要となります。
このvarはvariables（日本語訳：変数）の省略形です。
記法に関しては全体的定義でも限定的定義でも違いはありませんが呼べる範囲が違う、ということに注意が必要です。
全体的定義のCSS変数を呼ぶサンプルコード
:root {
--primary-color: #007bff;
}
/* 全体的定義なので他の要素でも変数を呼び出すことができる👇 */
.example {
background-color: var(--primary-color); /* OK */
}
限定的定義のCSS変数を呼ぶサンプルコード
.element {
--primary-color: #007bff;
background-color: var(--primary-color); /* OK */
}
/* 限定的定義なので他の要素で変数を呼び出すことができない👇 */
.other-element {
background-color: var(--primary-color); /* NG */
}
CSS変数の限定的定義の使いどころは限られていますが、たまーに使う場面もあったりします。
例えば、特定の要素内でのみ何か一つの値を常に同じにしたかったり、それを計算式にも組み込みたいケースなどで使い捨て感覚の変数を定義したい場合などがあります。↓
.circle {
--size: '100px';
/* 正方形が欲しい（widthとheightは常に同じ値にしたい） */
width: var(--size);
height: var(--size);
/* 正方形の高さ半分だけ上にずらしこみたい */
margin-top: calc(var(--size) / 2);
}
おまけ
CSSフレームワークのデバッグしやすくなる
最近のCSSフレームワークは内部処理にCSS変数を積極的に採用しています。
CSS変数覚えておくだけでデベロッパーツールからCSSのデバッグしやすくなる、という小さなメリットもあります。
Discussion