先生と生徒の会話形式で理解しよう

生徒

「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変数で一括したデザイン統一を行えば、効率的に美しいサイトを構築できます。

まとめ

BootstrapにおけるCSS変数とSass変数の理解を深めよう

ここまで、Bootstrapで利用されているCSS変数とSass変数について、仕組みや役割、使い分けの考え方を詳しく見てきました。 Bootstrapは単なるCSSフレームワークではなく、柔軟なカスタマイズ性を持つ点が大きな魅力です。その柔軟性を支えているのが、CSS変数とSass変数という二つの変数の存在です。

CSS変数は、ブラウザがHTMLとCSSを読み込んだあとでも値を変更できるという特徴があります。そのため、ユーザー操作によって見た目が変わる機能、たとえばダークモード切り替えやテーマカラー変更などに非常に向いています。 Bootstrapでは --bs-primary や --bs-body-bg など、多くのCSS変数が定義されており、これらを活用することで、JavaScriptを組み合わせた動的なデザイン変更が可能になります。

一方で、Sass変数は開発段階で使われる変数です。 BootstrapをSassでビルドする際に、$primary や $font-size-base などを変更することで、サイト全体の配色や文字サイズ、余白設計などを一括で調整できます。ただし、Sass変数はビルド時にCSSとして確定するため、ブラウザ上で即座に切り替えることはできません。その代わり、設計段階での一貫性や保守性を高める役割を担っています。

CSS変数を使った簡単なまとめサンプル

ここでは、記事の内容を振り返るために、CSS変数を使った簡単なサンプルをもう一度確認してみましょう。 Bootstrapと同じ考え方で、色を変数として管理し、HTML要素に適用しています。


<style>
:root {
    --bs-summary-color: #198754;
}

.summary-title {
    color: var(--bs-summary-color);
}
</style>

<h2 class="summary-title">Bootstrapの変数を理解するまとめ見出し</h2>
<p>CSS変数を使うことで、後から色を柔軟に変更できます。</p>

ブラウザ表示

このように、CSS変数を使えば、クラスやHTML構造を変えずに見た目だけを切り替えられます。 Bootstrapが提供しているCSS変数も、同じ仕組みで動いています。仕組みを理解しておくことで、既存のBootstrapクラスを壊さずにカスタマイズできるようになります。

Sass変数と組み合わせた設計の考え方

実務では、CSS変数とSass変数のどちらか一方だけを使うのではなく、両方を組み合わせて使うケースが多くなります。たとえば、企業サイトやサービスサイトでは、ブランドカラーや基本フォントサイズはSass変数で固定し、ユーザーが切り替えるダークモードや配色テーマはCSS変数で対応するといった設計がよく採用されます。

このような役割分担を意識することで、Bootstrapのカスタマイズは格段に分かりやすくなります。「どこまでが設計で、どこからが動的変更なのか」を考えることが、CSS設計の第一歩とも言えます。

先生と生徒の振り返り会話

生徒

「最初はCSS変数とSass変数の違いがよく分からなかったんですが、ブラウザで変えられるかどうか、という視点で考えるとスッと理解できました。」

先生

「それはとても大切な理解ですね。 Bootstrapを使うときは、見た目を後から切り替えたいのか、それとも最初から全体のデザインを決めたいのかを考えると、 CSS変数とSass変数の使い分けが自然に見えてきます。」

生徒

「ダークモードみたいな機能はCSS変数、サイト全体の色設計はSass変数、というイメージですね。」

先生

「その通りです。 Bootstrapは最初からその考え方で作られているので、変数の仕組みを理解すれば、公式ドキュメントも読みやすくなりますよ。」

生徒

「これからは、ただクラスを当てるだけじゃなくて、変数を意識しながらBootstrapを使ってみます。」