女性向けエンジニアスクール
3秒でわかる
CSSの中で値に名前を付けて使い回す仕組み。色や余白を一か所にまとめ、テーマ切り替えやブランド色の変更を一行の書き換えで済ませるために使います。
もう少し詳しく
どういうものか
CSS 変数は、正式にはカスタムプロパティと呼ばれる仕組みです。ハイフン二つで始まる名前に値を持たせて宣言し、使う側は var() で呼び出します。SCSS の変数と違ってブラウザが実行時に解決するため、ビルドし直さずに値を差し替えられます。宣言した要素とその子孫に継承されるので、:root に置けばページ全体で使えます。
なぜ必要か
同じ色コードが CSS の中に何十か所も散らばっていると、ブランド色の変更が全置換の作業になり、置き換え漏れが必ず出ます。名前を付けて一か所に集めておけば、変更点はその一行だけです。継承されるという性質のおかげで、ダークモードのように「特定の範囲だけ値を上書きする」使い方もできます。
具体例
:root {
--color-bg: #ffffff;
--color-text: #1a1a1a;
--brand: #0071e3;
--space: 8px;
}
[data-theme="dark"] {
--color-bg: #14161a;
--color-text: #f2f2f2;
}
body {
background: var(--color-bg);
color: var(--color-text);
padding: calc(var(--space) * 3);
}
.button {
background: var(--brand);
/* 未定義のときに使う既定値を第2<a href="/glossary/argument" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">引数</a>で渡せる */
border-radius: var(--radius, 8px);
}JavaScript から値を差し替えることもできます。
document.documentElement.style.setProperty("--brand", "#e0245e");
document.documentElement.dataset.theme = "dark";似た用語との違い
SCSS の変数はコンパイル時に値へ置き換わって消えるため、実行時に変えられず、メディアクエリの中で値だけ差し替えるような使い方もできません。反面、CSS 変数はブラウザが古い環境で使えないという制約があります。どちらか一方ではなく、テーマのように動かしたい値は CSS 変数、ビルド時に決まる計算は SCSS の変数、と役割を分ける構成が扱いやすくなります。
つまずきやすいところ
名前は大文字と小文字を区別するため、--mainColor と --maincolor は別物として扱われます。また、値が未定義だったときに var() は無効値となり、そのプロパティは初期値へ戻ります。指定したはずの色が黒や透明になったときは、綴り違いか、宣言した要素の外側で使っていないかを疑います。メディアクエリの条件そのものに変数を書くことはできない点も、よく引っかかる制約です。
