CSS の変数は継承できるのが厄介

• CSSの変数を使う | MDN
• CSS Variables (Custom Properties) | Can I Use

現在の仕様だとこんなふうに指定する。IE ではまだ使えない。

/* 変数を定義する */
/* :root 擬似クラスに指定することで、変数をどこでも使えるようにする */
:root {
    --black: #333;
    --main-color: yellow;
    --base-size: .5em;
    --text-bold: 700;
}

/* 変数を使う */
div {
    color: var(--black);
    background-color: var(--main-color);
    padding: calc(var(--base-size) / 2);
    font-weight: var(--text-bold);
}

var() で変数を呼び出してるけど、var って書くのが面倒そう。Sass や jQuery みたいに $ とか記号一文字にならないかな。

また、注意しておきたいのが変数の継承。MDN にわかりやすい説明とデモがある。

• CSS 変数の継承 - CSSの変数を使う | MDN

SCSS の変数と違うのはここで、CSS の変数は継承という厄介な概念をもっている。自分でもデモをつくってみた。

• (Demo) CSS で変数の継承を確認 - JSFiddle
  • ちなみに、SCSS でこれと同じことをやろうとすると文法エラーで色が適用されない
• (Demo) SCSS で文法エラーがでないようにして、継承がおきるか確認 - JSFiddle

CSS のデモでは .four の背景色が赤で上書きされていることから、.two で定義された変数（--color）を継承していることがわかる。SCSS の場合、.four の背景色が白のままなので、.two で定義された変数を継承してないのがわかる。

変数が継承できるのは厄介にしか思わないけど、どうなんだろうか。