CSS変数の簡単な紹介（カスタムプロパティ）

現在、ほとんどの最新のブラウザーでは、プリプロセッサーを一切使用しない純粋なCSSの変数を使用できます。これらは正式にはカスタムプロパティと呼ばれ、従来のCSSに伴う繰り返しの多くを回避でき、プリプロセッサを使用する変数とは異なり、動的に変更できます。

カスタムプロパティの使用方法は次のとおりです。

/* Declaration */
some-element {
  --my-bg-color: #F9EC31;
}

/* Using it */
some-element {
  background-color: var(--my-bg-color);
}

変数を使用するときにフォールバック値を指定することもできます。これは、変数が定義されていない場合に使用されます。

some-element {
  background-color: var(--my-bg-color, papayawhip);
}

：根

一般的なユースケースは、：root疑似クラスで変数を定義し、値が必要な場所でそれを使用することです。

:root {
  --funky-shadow: 3px 3px 10px brown;
}

.ugly-box {
  box-shadow: var(--funky-shadow);
}

変数値に対してcalc（）を使用することもできます。

:root {
  --special-padding: 1.5em;
}

.pandora-box {
  padding-bottom: calc(var(--special-padding) + 1em);
}

ブラウザのサポート

👉神話は、今日CSS変数の使用を開始するための良いオプションです。

css-variablesを使用できますか？ caniuse.comの主要なブラウザーでのcss-variables機能のサポートに関するデータ。

span.hljs-number {color：initial; }