CSSを使わずSassやSCSSを使いたがる理由のひとつに，変数を使いたいことがある．文字色や値を繰り返さずに記述したほうが管理しやすいし，変数にすると簡単に計算できるからだ．つい最近，CSSで変数が使えるようになったので，その使い方を紹介したい．

:root
{
    --greenFont: #0f0;
    --centerText: center;
}
h3
{
    color: var(--greenFont);
    text-align: var(--centerText);
}

　とすると，h3タグの文字が緑色で画面中央に現れる．ポイントは，:rootで--を先頭に変数名と値を定義し，使いたいタグでvar(変数)と書くことである．