CSS変数をJavaScriptで動的に変更し、複数のスタイルに一括適用する

いつの間にかVanilla CSS（ブラウザ標準のCSS）でもSassみたいにCSS変数（CSS Variales）が使えるようになっていた。

CSS変数の何が嬉しいかというと、たとえばベースカラーを定義しておいて複数のスタイルで参照しておく。後日ベースカラーを変更したくなったらCSS変数を変更するだけで他は弄らなくてよくなりメンテがしやすくなる点だ。

CSS変数の基本

基本的な使い方は、CSS変数の宣言と使用。

/* グローバルにCSS変数を宣言する */
:root {
  --base-color: black;
}

/* ローカル（selector）にCSS変数を宣言する(※ selector以外の場所では使えない) */
selector {
  --selector-color: white;
}

/* CSS変数を使う */
selector {
  background-color: var(--base-color);
  color: var(--selector-color);
}

CSS変数は、プレフィックスに--（ハイフン2つ）をつけて宣言する。

グローバルにCSS変数を宣言するときは、:root擬似クラスがよく使われる。
ここで宣言したCSS変数は、どこでも利用することができる。

とあるセレクタにCSS変数を宣言すると、その配下の要素でのみCSS変数を使うことができる。

JavaScriptからCSS変数を変更する

このCSS変数はJavaScriptから変更できる。

<div class="item a">a</div>
<div class="item b">b</div>
<div class="item c">c</div>
<input id="slider" type="range" min=0 max=300>

:root {
  --base-width: 100px;
}

.item.a {
  width: calc(var(--base-width));
  background-color: red;
}
.item.b {
  width: calc(var(--base-width) * 2);
  background-color: green;
}
.item.c {
  width: calc(var(--base-width) * 3);
  background-color: blue;
}

const $ = el => document.querySelector(el);

$('#slider').addEventListener('input', e => {
  $(':root').style.setProperty('--base-width', `${e.target.value}px`);
});

スライドバーを変更したときに--base-widthを更新することで、CSS変数を参照している3つの要素のスタイルがいっきに書き換わるので、スタイルの定義はCSSに、動的な処理はJavaScriptに、と責務を分解できる。

参考サイト

• CSSの変数を使う - CSS | MDN
• :root - CSS | MDN

以上

written by @bc_rikko