Qiitaに書いた。
Sassで色を管理してどう利用するのがベストなのか以前悩みまくっていて、色々考えてこの方法になった。なのでこれは経験から悩んでひらめいた結果の知見で、もしかするともっといい方法があるのかもしれない。
つらくなるときはどういうときか
SassならびにAltCSSで色の変数定義の例を見ていると、ものすごく$color-grayとか$color-gray-primaryとかひどいと$grayとかしている例が多い気がしている。別にそれでも最初のうちは問題ないのだけど繰り返し修正や変更があったり、とんでもない大規模な色の変更があるとつらくなってくる(実際につらくなったことがある)。
$color-gray: #~~~ $color-gray-light: #~~~ $color-gray-dark: #~~~
例えばこんな感じに$color-grayをベースにやっていたところ、機能追加や修正などでこのグレー色よりは明るいけど、$color-gray-lightよりは暗いグレーみたいなのが出てきたとする。
さらにもう1色そもそも明度じゃなく彩度が違うグレーが出てきたりしたらすぐ困ることになる。
$color-gray: #~~~ $color-gray-moreLight: #~~~ // ←こう？ $color-gray-midLight: #~~~ // ←それともこう？ $color-gray-light: #~~~ $color-gray-dark: #~~~ $color-lightGray: #~~~ // ←それとも新しい派生を作る？
おわかりだと思うけど、つらすぎる。
moreLightだろうがmidLightだろうが基準がこうなった途端に曖昧になって、$color-grayよりmoreLightなのか$color-gray-lightよりmoreLightなのかが不明になる。
$color-lightGrayを新しく作ってもとりあえずのところはいいけれど、あとあと困る原因になりがち。この$color-lightGrayよりも明るいグレーが出てきたら？なにがlightでなにがdarkなのか、さっぱりわからなくなってしまう。
ここまで読んでわかると思うけど、明度彩度や順番で命名するのは未来にどうなるかわからないという不確実性を孕んでいるからよくない、ということがよくわかる。
そういうわけでQiitaに書いたように、
- カラーパレットを作ってその色単体を表す名前で定義する:
$palette- - その色をどこで使うのかを機能(パーツ)単位で新たに定義する
$color- - 実際のクラス名に機能名の変数を用いて色を用いる
というのが所在がはっきりするし足し引きや変更も容易になるというメリットがある。
詳しくはQiitaの記事をご参照のください
