CSS変数の基本と使用例

CSS変数はその名の通りCSSで使うことのできる「変数」です。設定したスタイルを使い回すことができます。カスタムプロパティやカスケード変数とも呼ばれています。（MDN）
Web Componentsを使う上でCSS変数を組み合わせて使うのは有効ですし、Web Componentsを使わずとも便利です。この記事では、基本的な説明と特性を活かした使用例を紹介します。

基本

頭にハイフン2つ (--) をつけて設定し、var()と書いて使います。

.sample {
  --color-black: #000000;
  color: var(--color-black);
  border-color: var(--color-black);
}

CSS変数は親から値を継承（カスケード）します。
サイト全体で使用するためには、:root擬似クラスを使って指定すると良いです。

:root {
  --color-black: #000000;
}

フォールバックを設定できます。カスタム要素（例：<custom-element></custom-element>）を使う場合に有用です。デフォルトの値をフォールバックで設定しておき、スタイルを変更したい場合は親で設定します。

/*web componentsでの使用を想定*/
:host {
  color: var(--base-color, #333);
}

ダークモード設定

CSS変数はダークモード対応に使えます。使用する側（今回のbody）ではなく、設定する側（CSS変数）で条件を分けます。

:root {
  --color-text: black;
  --color-bg: white;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: white;
    --color-bg: black;
  }
}
body {
  color: var(--color-text);
  background-color: var(--color-bg);
}

レスポンシブ設定

メディアクエリを使ってCSS変数を上書きできます。

:root {
  --size: 4em;
  @media (min-width: 80em) {
    --size: 8em;
  }
}
.sample {
  width: var(--size);
}

Sassで変数を使う場合は変数を複数用意していました。

$sise-sm: 40em;
$size-lg: 80em;

CSS変数では１つの値を変化させることができます。変数に変化の条件を設定できるため、より柔軟に設計することが可能です。次のFlexboxの例を見てもらえると実感できると思います。

CSS変数を活かしたFlexbox

Flexboxの余白（gap）と、横に並べる個数（count）を変数にしています。

See the Pen Untitled by T_Y (@y___k) on CodePen.

.list {
  --gap: 1em;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

.item {
  --count: 1;
  width: calc((100% - var(--gap) * (var(--count) - 1)) / var(--count));
  @media (min-width: 40em) {
    --count: 2;
  }
  @media (min-width: 60em) {
    --count: 3;
  }
}

まとめ

IE11対応がなくなった現在、CSS変数はpolyfill無しで使用できます。Can I use
これまではSassで書いてCSSに変換することが主流でしたが、WebComponentsを使い始めたことがきっかけでCSS変数を使い始めました。今後、CSS変数を活かしたCSS設計を考えようと思っています。