CSSで変数を使いたい

CSSの変数（カスタムプロパティ）を使う作法を簡単に。

• –で定義してvar()で呼び出します
• :root{}内で定義します。
• var(–size)px などのようにカスタムプロパティに単位を付加することはできません。
• カスタムプロパティに単位がない場合はcalc()を使って* 1pxなどをして単位を付けられます。
• カスタムプロパティ内でカスタムプロパティを呼び出すこともできる。
• カスタムプロパティが呼び出されなかった場合のフォールバックはvar(–body-color, black)のように指定できる。
• 大文字小文字は区別されます。
• カスタムプロパティはプロパティ名には使用できず、値のみに使用できます。
• IEには対応していません。

:root{
    --変数名:値;
}

body{
    color:var(--変数名);
}

h1{
    color:var(--変数名,フォールバックの値);
}