TechStack

CSS変数（カスタムプロパティ）入門

CSS変数（カスタムプロパティ）は、再利用性や保守性を高めるために使える便利な機能です。
SassやLessなどのプリプロセッサを使わなくても、純粋なCSSで変数を扱えます。

基本構文

CSS変数は、--（ハイフン2つ）から始まる名前で定義します。
通常は**:root**セレクタに書くことで、全体で利用できます。

:root {
  --main-color: #3498db;
  --font-size: 16px;
}

body {
  color: var(--main-color);
  font-size: var(--font-size);
}

定義: --変数名: 値;
呼び出し: var(--変数名)

スコープ（適用範囲）

変数は定義された要素とその子孫要素に対して有効です。

<div class="wrap">
    <div class="container">
        <span class="item"></span>
    </div>
    <div class="other"></div>
</div>

.container {
  --bg-color: #f5f5f5;
}

.container .item {
  background-color: var(--bg-color); /* 有効 */
}

.other {
  background-color: var(--bg-color); /* 無効（スコープ外）*/
}

フォールバック値（代替値）

もし変数が未定義の場合、**var()**の第2引数に指定した値が使われます。

.box {
  background-color: var(--undefined-color, #ccc);
}

JavaScriptとの連携

JavaScriptからCSS変数を読み書きできます。

// 変数の値を取得
const root = document.documentElement;
const mainColor = getComputedStyle(root).getPropertyValue('--main-color');

// 変数の値を変更
root.style.setProperty('--main-color', '#e74c3c');

利用シーン例

サイト全体のテーマカラー管理
ダークモード・ライトモードの切り替え
コンポーネントごとのスタイルカスタマイズ

まとめ

CSS変数は**--**から始まる名前で定義する
**var(--変数名, フォールバック値)**で利用可能
スコープがあり、JavaScriptからも動的に変更できる