Variables

10. CSS変数 (Custom Properties)

--variable-name で変数を定義し、var(--variable-name) で使用します。
テーマカラーの一括変更、ダークモード切り替え、コンポーネント内での値共有に便利です。

🎮 テーマカラープレイグラウンド

--theme-primary

--theme-secondary

--theme-text

プリセット

カードタイトル

CSS変数を使うと、1箇所の変更で全ての色が変わります。
ダークモード切り替えも簡単です。

:root {
  --theme-primary: #38bdf8;
  --theme-secondary: #1e293b;
  --theme-text: #f8fafc;
}

.card {
  background: var(--theme-secondary);
  color: var(--theme-text);
}

.card h3 {
  color: var(--theme-primary);
}

フォールバック値

変数が未定義の場合のデフォルト値を設定できます。

/* 変数が未定義なら blue を使用 */
.box {
  color: var(--undefined-color, blue);
}

/* 変数を別の変数でフォールバック */
.box {
  color: var(--brand-color, var(--fallback-color, black));
}

📌 覚えておきたいポイント

変数名は -- で始める（--primary-color）
:root で定義するとグローバルで使える
コンポーネント内で定義すればローカルスコープ
JavaScriptで動的に変更可能: element.style.setProperty('--color', 'red')
フォールバック値: var(--color, fallback)
Sassの変数と違い、実行時に値が解決される