変数 - CSS

変数

モダンな CSS ではあるセレクタ内に頭に--を付けた宣言を置くこで、そのセレクタ以下のスコープ（selector *）でvar関数を使ってその値を取得することができます。

この機能はIEでは使用でないので注意が必要です。

:root {
  --text-color: orange;
}

body {
  color: var(--text-color);
}

例えばこの CSS の場合、HTML が、

<!DOCTYPE html>
<html>
  <body>...</body>
</html>

として、こう解釈されます。

body {
  color: orange;
}

:rootはhtmlと同じ意味です。:root *にはbodyが含まれるので、bodyセレクタではvarを使ってorangeという値を使うことができます。

同じ変数定義が自分または親に2箇所以上存在する場合は、自分に一番近いものを使うことができます。つまり、

:root {
  --text-color: orange;
}

body {
  --teext-color: blue;
}

body {
  color: var(--text-color);
}

の場合一番近いのは自分自身の--text-colorなので、

body {
  color: blue;
}

となります。

気になったので調べてみましたが、必ず前に書かないといけないという訳ではないようです。

body {
  color: var(--text-color);
}

:root {
  --text-color: orange;
}

これでも、ちゃんとオレンジ色になってくれました。