【CSS】変数を使ってみよう

使用スタイル

:root{ --foo-bar: white; }

カスタムプロパティの設定方法

CSSで変数を使用するにはカスタムプロパティの記述が必要です。カスタムプロパティの指定方法は「--foo-bar」のように最初に「--」を付けることがルールになっています。
擬似クラスの「:root」のブロック内にカスタムプロパティを記述するとグローバル変数として扱うことができ、好きなところで使用できます。また、カスタムプロパティは継承をする事ができます。「:root」で定義したカスタムプロパティを子要素で上書きすることができます。

カスタムプロパティの値の使用

var()関数を使ってカスタムプロパティの値を使用する事ができます。「background-color: var(--foo-bar);」のように関数を使って変数の値にアクセスします。

サンプル

カスタムプロパティを使ってCSSを適用させます。

:root {
  --sample-box-width: 300px;
  --sample-box-height: 100px;
}

#parent194 div{
  color: white;
}

#parent194 {
  --sample-color: red;
}

#first-child194 {
  --sample-color: blue;
}

#first-child194 {
  width: var( --sample-box-width );
  height: var( --sample-box-height );
  background-color: var( --sample-color );
}

#second-child194 {
  width: var( --sample-box-width );
  height: var( --sample-box-height );
  background-color: var( --sample-color );
}