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

## はじめに

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

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

### 今までの記述の場合

SCSSのコードが冗長になってしまう。
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="LYwxLva" data-pen-title="CSS変数によるカテゴリー分け01" data-user="garage-leo" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/garage-leo/pen/LYwxLva">
  CSS変数によるカテゴリー分け01</a> by garage-leo (<a href="https://codepen.io/garage-leo">@garage-leo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#### mixinを使った場合

SCSSなら`@mixin`と`@include`があるので、ある程度記述が短縮できるが、background-colorやborderなど、それぞれの部分でまた記述が必要になってしまう。
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="RwXKZPP" data-pen-title="CSS変数によるカテゴリー分け02" data-user="garage-leo" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/garage-leo/pen/RwXKZPP">
  CSS変数によるカテゴリー分け02</a> by garage-leo (<a href="https://codepen.io/garage-leo">@garage-leo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

#### 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変数の場合
:::note warn
`CSS変数`の値に`SCSS変数`を使いたい場合は、インターポレーション`#{}`でくくる必要があります。
:::
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="PoMWKEm" data-pen-title="Untitled" data-user="garage-leo" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/garage-leo/pen/PoMWKEm">
  Untitled</a> by garage-leo (<a href="https://codepen.io/garage-leo">@garage-leo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

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

### 解説策１

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

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="KKOavEr" data-pen-title="CSS変数によるカテゴリー分け03" data-user="garage-leo" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/garage-leo/pen/KKOavEr">
  CSS変数によるカテゴリー分け03</a> by garage-leo (<a href="https://codepen.io/garage-leo">@garage-leo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
無難なやり方ですが、いちいちRGBにするのはたまに忘れそうです。

### 解説策２

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

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="bGXgoNj" data-pen-title="CSS変数によるカテゴリー分け05-color-mix関数" data-user="garage-leo" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/garage-leo/pen/bGXgoNj">
  CSS変数によるカテゴリー分け05-color-mix関数</a> by garage-leo (<a href="https://codepen.io/garage-leo">@garage-leo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
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