CSSカスタムプロパティ
#css
#css変数
(
MDN
)
sass
の変数と異なり、通常のプロパティと同じように子要素に継承される。
(解説は
CSS カスタムプロパティはパラメータの夢を見るか
僕がネイティブな CSS 変数にわくわくする理由
がわかりやすいのでそっちを読んでいただきたいです)
例
code:css
:root {
--main-bg-color: brown;
}
element {
background-color: var(--main-bg-color);
}
変数名は
--
で始める
変数名は
case sensitive
var()
で値を参照できる
:root
擬似クラスで宣言することで、文書全体に適用できる
必要な場所で参照する