CSS カスタムプロパティ（変数）とは何ですか？

Question

Accepted Answer

**CSS カスタムプロパティ**（変数）を使うと、値を一度保存して何度も再利用できます。プリプロセッサ（Sass）の変数と異なり、**実行時に動作** — カスケード、継承し、JavaScript またはメディアクエリで変更可能です。

```css
:root {                 /* :root = the html element → global scope */
  --color-primary: #3b82f6;
  --spacing: 1rem;
  --radius: 8px;
}

.button {
  background: var(--color-primary);   /* use with var() */
  padding: var(--spacing);
  border-radius: var(--radius);
}
```

## フォールバック値

```css
color: var(--text-color, black); /* use black if --text-color isn't defined */
```

## カスケードし、スコープ設定/上書きが可能

```css
.card { --padding: 1rem; }
.card.compact { --padding: 0.5rem; } /* override locally — children using var() update */
```

継承するため、親要素に設定された変数はすべての子孫で利用でき、サブツリーで上書きできます — コンパイルされてしまう Sass 変数ではできないことです。

## キラー機能：実行時テーミング

```css
:root { --bg: white; --text: black; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --text: #eee; } /* redefine the SAME vars for dark mode */
}
body { background: var(--bg); color: var(--text); }
```

少数の変数を再定義するだけでテーマ全体を切り替えられます — ルールの重複なし。JS でも実行できます：

```js
document.documentElement.style.setProperty("--color-primary", "#e11d48");
```

これはその変数を使うすべての要素を即座に更新します — コンパイルされた Sass 変数では不可能です。

## なぜ重要なのか

CSS 変数は、現代的な**テーミングとデザイントークン**の基盤です：色/間隔を一度定義し、どこでも再利用し、メディアクエリまたは JavaScript で実行時にテーマ（ダークモード、ブランドバリエーション）を切り替えられます。

プレーン CSS に DRY で動的な値をもたらします — ビルドステップ不要です。