BootstrapのCSS変数とSass変数を完全解説！初心者でもわかる即時切替とビルド時変更の違い
生徒
「Bootstrapを勉強していたら、CSS変数とSass変数っていう言葉が出てきたんですが、どう違うんですか？」
先生
「とても大事なポイントですね。CSS変数とSass変数は似ているようで役割が違うんです。簡単に言うと、CSS変数はブラウザ上で即時に切り替えできる変数で、Sass変数はビルド時に決まる変数です。」
生徒
「なるほど。でもそれってどういう場面で使い分けるんですか？」
先生
「それをこれから具体的に説明します。Bootstrapのカスタマイズをするうえでとても重要な知識ですよ。」
1. CSS変数とは？即時切替が可能な特徴
CSS変数は、ブラウザ上でそのまま利用できる変数です。例えば色を --bs-primary という名前で定義すると、どの要素でも呼び出して使えます。CSS変数の大きな特徴は、ページを読み込んだ後でもJavaScriptなどを使って即座に値を変更できることです。
これは「テーマの切り替え」や「ダークモードの即時変更」にとても便利です。ボタンを押した瞬間に背景色や文字色を切り替える、といった仕組みはCSS変数のおかげで簡単に実現できます。
<style>
:root {
--bs-primary: #0d6efd;
}
h1 {
color: var(--bs-primary);
}
</style>
<h1>これはCSS変数を使った見出しです</h1>
2. Sass変数とは？ビルド時に決まる仕組み
Sass変数は、開発中にスタイルをまとめて管理するための変数です。Bootstrapの多くのデザインは $primary や $font-size-base といったSass変数で定義されています。
ただしSass変数はあくまで「ビルド時」に反映されるので、ブラウザ上で後から即時に切り替えることはできません。その代わりに、コードの可読性が上がり、サイト全体のデザインを統一するのに役立ちます。
3. CSS変数とSass変数の違いを整理しよう
ここで二つの違いを分かりやすく整理してみましょう。
- CSS変数：ブラウザ上で即時に変更可能。JavaScriptで操作できる。テーマ切り替えや動的変更に強い。
- Sass変数：ビルド時に決定される。開発中の管理や全体統一に便利。ただし即時変更はできない。
イメージとしては「CSS変数は電気のスイッチ（その場でオンオフ可能）」、「Sass変数は設計図の寸法（工事が終わったら変えられない）」のような違いがあります。
4. Bootstrapでの具体的な使い分け
Bootstrapでは、Sass変数をカスタマイズしてデフォルトデザインを変更しつつ、CSS変数を活用して動的な切り替えを行うのが一般的です。
例えば、ボタンの色を全体的に青から緑にしたい場合は、Sass変数 $primary を変更します。一方で、ユーザーがワンクリックで「ライトモード／ダークモード」を切り替えられるようにする場合は、CSS変数を利用して --bs-body-bg の値を切り替えます。
5. 実際に切り替えてみるイメージ
次のコードでは、ボタンを押すと背景色がCSS変数で即時に切り替わる仕組みを表しています。
<style>
:root {
--bs-body-bg: white;
}
body {
background-color: var(--bs-body-bg);
}
.dark-mode {
--bs-body-bg: black;
}
</style>
<body class="dark-mode">
<h2>ダークモードに切り替わった背景</h2>
</body>
6. 使い分けのコツ
基本的なルールとして、次のように考えるとわかりやすいです。
- サイト全体のデザイン基盤を決めたい → Sass変数
- ユーザーが操作して変わる動きに対応したい → CSS変数
Bootstrapの強みは、この両方を柔軟に使える点にあります。CSS変数でダークモードを即時切り替え、Sass変数で一括したデザイン統一を行えば、効率的に美しいサイトを構築できます。
