CSSは変数を使うことができます。
:rootとかいうやつです。
使っているテーマでCSS変数を使っていて、その変数が広く使われている場合、その変数の値を書き換えるとどこまで影響があるのかよくわからなかったりします。
CSS変数は、セレクタ内で書き換えることもできることを知って、結構便利だったのでメモしておきます。
:root{
--hogehoge__color:#fff;
}
#section1_hoge{
background:var(--hogehoge__color);
}
#section2_hoge{
background:var(--hogehoge__color);
}
#section2_hoge{
/*ここだけ変数値が書き換わる*/
--hogehoge__color:#000;
}
@media screen and (max-width: 600px){
#section2_hoge{
/*ここだけ変数値が書き換わる*/
--hogehoge__color:#ddd;
}
}
:rootというのはセレクタ内部には書けないのですが、CSS変数の設定値はセレクタ内部に書けて、かつ、条件で細かく書き換えることも可能だということです。
最近のテーマのCSSを見ていると、セレクタ内でvarでCSS変数を参照している場合、そのあとセレクタ内で書き換え時にはvarは不要で、変数の値を直接書き換えるというのが一般的な流儀のようです。
