CSS カスタムプロパティ（変数）を使ってカテゴリーごとに色分けしてみた。

はじめに

カテゴリーやコンテンツごとに色分けしたいけど、色数が増えるほど、色を振り分けるCSSの記述も冗長になってしまうということはないでしょうか。

その悩みをCSSカスタムプロパティ（以下、CSS変数）を使って解決しました。

今までの記述の場合

SCSSのコードが冗長になってしまう。

See the Pen CSS変数によるカテゴリー分け01 by garage-leo (@garage-leo) on CodePen.

mixinを使った場合

SCSSなら@mixinと@includeがあるので、ある程度記述が短縮できるが、background-colorやborderなど、それぞれの部分でまた記述が必要になってしまう。

See the Pen CSS変数によるカテゴリー分け02 by garage-leo (@garage-leo) on CodePen.

解決したいこと

色の使いどころは決まっているため、変数のように、色を入れ子にして一括管理したい。

CSS変数のおさらい

--（ダッシュ2本）を先頭に付けプロパティ名を決めます。
:(セミコロン)で区切り、値を決めます。

擬似クラス（:root）と再定義

:root（擬似クラス）内で宣言することで、グローバルに値を参照することができます。

:root{
    --category-color:black;
}

また、セレクタ内で宣言することで、その範囲内で、値が変更されます。

.category01 {
    --category-color:#{$category-color01};
}
.category02 {
    --category-color:#{$category-color02};
}
.category03 {
    --category-color:#{$category-color03};
}

使用時はvar(--変数名)で呼び出します。

p{
    color: var($category-color01);
}

CSS変数の場合

CSS変数の値にSCSS変数を使いたい場合は、インターポレーション#{}でくくる必要があります。

See the Pen Untitled by garage-leo (@garage-leo) on CodePen.

SCSSにおけるCSS変数の問題点

CSS変数を使った例を見たらわかると思いますが、sectionのbackground-color: rgba()が思った通りに動作してません。これは--category-color:#{$category-color01};をSCSS変数ではなく、直接16進数の値を入れても変わりません。

SCSSだと、16進数の値を入れても、rgbaに変換してくれますが、そのままCSS変数が入ってしまうようです。

解説策１

CSS変数をR,G,Bの数値に切り分けて、colorプロパティは全てrgb関数にする。

See the Pen CSS変数によるカテゴリー分け03 by garage-leo (@garage-leo) on CodePen.

無難なやり方ですが、いちいちRGBにするのはたまに忘れそうです。

解説策２

rgba関数の代わりにcolor-mix関数を使って、transparentの透明度を混ぜる。

See the Pen CSS変数によるカテゴリー分け05-color-mix関数 by garage-leo (@garage-leo) on CodePen.

color-mix関数はIEではサポートされてないようですが、IE自体のサポートは終了してるので問題ないでしょう。

まとめ

いかがったでしょうか。CSS変数は便利なので、がしがし使っていきたいです。
より良いCSS変数とSCSS変数の合わせ技をご存知でしたらぜひ教えてください。

参考リンク

https://qiita.com/taqumo/items/b221e689c8c27500b47a
https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties
https://www.tak-dcxi.com/article/rgba-function-is-legacy-syntax/
https://qiita.com/hrism/items/2d7575e58869e7067eb8