var()

CSSで変数を使う際に使用する。「カスタムプロパティ」とも言う。

#foo {
  --my-cool-background: #73a4f4;
  background-color: var(--my-cool-background);
}

var()の正式な書式では、カンマ（,）で区切って変数のデフォルト値（変数が参照できなかったときに使用される値）を定義することができるようになっている。
var( 変数名, デフォルト値)

グローバル変数

変数名にダブルハイフン（–）をつけ、とりあえず:rootまたは要素で変数を定義する。変数を値に使用する時には、var()に変数名を定義する。
変数–color-primaryは:root要素で定義したため、グローバル変数である。すべての値でこのCSSの変数を使用できる。また、変数のスコープを設定し、特定の要素にだけ変数を適用することもできる。

:root {
  --color-primary: #235ad1;
}
.section {
  border: 2px solid var(--color-primary);
}
.section-title {
  color: var(--color-primary);
}
.section-title::before {
  /* Other styles */
  background-color: var(--color-primary);
}

【参考】
https://coliss.com/articles/build-websites/operation/css/css-variables.html

inserted by FC2 system