CSS変数（カスタムプロパティ）が便利だった #CSS

ずっとSassの変数と同じだろうと思いスルーしていました。
試しに使ってみたところ、Sass ではできない便利な変数の利用方法を発見！
というわけで、CSS変数（カスタムプロパティ）の仕様をまとめてみました。

変数の宣言と値の定義

変数の宣言
- 先頭にハイフンを2つ -- 付けて任意の名前を記述する
  - 大文字・小文字が区別される
値の定義
- コロン : で区切って値を記述する
スコープ
- :root 擬似クラスで変数を宣言することで、どこでも使用可能
- CSSセレクタ内

CSS

/* どこでも使用可能 */
:root {
  --text-color: #444;
}
/* セレクタ内で使用可能 */
.hoge {
  --hoge-color: red;
}

変数の呼び出し

var(--変数名) 関数を使って呼び出す
プロパティ名を変数にすることはできない

CSS

:root {
  --text-color: #444;
  --margin: margin;
}
.hoge {
  color: var(--text-color);
}
/* プロパティ名を変数にすることはできない */
.fuga {
  var(--margin): 30px;
}

フォールバック値の設定

指定されたCSS変数が未定義の場合、代替値をカンマ区切りで複数指定可能
- 代替値にCSS変数を指定する場合は var() 関数を使用する

CSS

/* --text-color が定義されていなければ #444 */
.hoge {
  color: var(--text-color, #444);
}
/* --text-color が定義されていなければ --text-color2 が適用 */
.hoge {
  color: var(--text-color, var(--text-color2));
}
/* --text-color2 は適用されない */
.hoge {
  color: var(--text-color, --text-color2);
}

CSS変数の中でCSS変数を設定

CSS変数はCSS変数を使って定義することも可能です。

CSS

:root {
  --gradient-start-color: #e66465;
  --gradient-end-color: #9198e5;
  --bg-gradient: linear-gradient(var(--gradient-start-color), var(--gradient-end-color));
}
.hoge {
  background: var(--bg-gradient);
}

CSS変数の継承

CSS変数は別の値が設定された場合、要素の子要素は新しい値を継承します。

CSS

:root {
  --text-color: #444;
}
body {
  color: var(--text-color);
}
.red {
  --text-color: red;
}
.blue {
  --text-color: blue;
}

HTML

<body>
  <p>黒い文字</p>
  <div class="red">
    <p>赤い文字</p>
  </div>
  <div class="blue">
    <p>青い文字</p>
  </div>
  <div>
    <p>黒い文字</p>
  </div>
</body>

メディアクエリ内での利用

これがとっても便利！
Sass ではメディアクエリ内で変数を定義することができません。
CSS変数を利用すると色の管理を一箇所でまとめて指定できちゃいます！

CSS

:root {
  --text-color: #444;
  --bg-color: #fff;
}
/* ダークモードの時 */
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #fefefe;
    --bg-color: #333;
  }
}
body {
  color: var(--text-color);
  background-color: var(--bg-color);
}

JavaScript での利用

CSS変数は Javascript から値の取得・設定が可能です。

値の取得

HTML

<div id="hoge"></div>

CSS

:root {
  --text-color: #444;
}
#hoge {
  color: var(--text-color);
}

javascript

const hoge = document.getElementById('hoge')
// hogeの計算済みスタイルを取得
const hogeStyle = getComputedStyle(hoge);
// CSS 変数 --text-color の値の取得
const hogeStyleVal = hogeStyle.getPropertyValue('--text-color');
console.log(hogeStyleVal); // #444

値の設定

html

<div id="hoge"></div>

CSS

:root {
  --text-color: #444;
}
#hoge {
  color: var(--text-color);
}

javascript

const hoge = document.getElementById('hoge')
hoge.style.setProperty('--text-color', 'red');