変数は LESS 等のプリプロセッサの機能だと思ってたら、2020年現在では普通に素のCSSで使えるようになっている。

基本はスタイルのプロパティを書くように変数に値を設定する。

:root{
    --hoge-piyo-fuga: #123456;
}

ここで書かれている root というのは擬似クラスで変数スコープが全体の場合はここに入れる。 変数名の頭にハイフン2個をつける必要がある

使う場合はスタイルに対して var キーワードとともに用いる

#hoge{
    color: var(--hoge-piyo-fuga);
}

グローバルはこのように作る

:root{
    --hoge-piyo-fuga: #123456;
}

グローバルなのでどのセレクタ位置においても有効に使える

このようにある特定のセレクタに対しても変数を作って、その内部で使うことができる。

#hoge{
    --hoge-piyo-fuga: #123456;
    color: var(--hoge-piyo-fuga);
}
#piyo{
    /* これは効かない */
    color: var(--hoge-piyo-fuga);
}

このスコープの感覚的にわかりにくい所は記述位置は CSS なのにスコープ範囲が HTML 構造によって変わるという点にある。

このような HTML があるとする

<div id="hoge">
    <div class="fuga"></div>
</div>
<div id="piyo">
    <div class="fuga"></div>
</div>

そこでこのように記述する。

#hoge{
    --color-fuga: #123456;
}
 
#piyo{
}
 
.fuga{
    color: var(--color-fuga);
}

普通のスコープ感覚なら #hoge の外からはアクセスできないので .fuga はスコープ外だと思うが、これは有効になる。.fuga で示される要素がHTML構造として #hoge 内部にあるから。

ここでもう一つ注意があって、#piyo 配下の .fuga 要素には効かないということになる。 .fuga で示される要素がHTML構造として #hoge 内部に無いから。

このように変数のスコープが HTML 構造を基にした別セレクタのように働くので注意が必要である。

ややこしいので、このスコープは使うの禁止にしたほうがよいのかもしれん。

変数は再代入、つまり上書き可能になっていて、より後に書いたもの、より詳細度が高いモノが有効になる。

つまり同一セレクタであれば後に書いたモノで上書きでき、classセレクタ内部で定義したような変数は、idセレクタ内部で定義した変数で上書きできる。

これもややこしいのでセレクタ詳細度を使った記述は使わないほうがいいと思う。

↑の通り、スコープに若干のクセがあってそれが CSS の記述的構造と一致しないので、混乱する。 なので基本的にプリプロセッサの変数を使ったほうがメンテ性は高い。