12
Help us understand the problem. What are the problem?

posted at

updated at

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変数では1つの値を変化させることができます。変数に変化の条件を設定できるため、より柔軟に設計することが可能です。次の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設計を考えようと思っています。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
12
Help us understand the problem. What are the problem?