Help us understand the problem. What is going on with this article?

変更に強いSassの色管理プラクティス

More than 1 year has passed since last update.

タイトルからは意図がわかりづらいかもしれませんが、端的にいうと変更に強いSassを書いて修正や改修時につらくなりにくい状態にしておきたいというはなしです:pray_tone1:

作業途中や改修でサイトのデザインが変わったり一部分の色が変更になったりする場合があると思いますが、そういうときにすばやく散らからずに対応できるようになります。

カラーパレット変数を作り、機能(パーツ)ごとにカラー変数作る:point_up_tone1:

言ってしまえばこれだけです。

例をみていきましょう。

まずカラーパレットをつくります:point_up_tone1:

_palette.sass
$palette-trueWhite: #fff
$palette-trueBlack: #000
$palette-sunnyRed: #FF141C
$palette-cherryRed: #D41655
$palette-sandGray: #999

なんでもない変数宣言。
接頭辞にpalette-をつけることでカラーパレットの定義であることがひと目でわかります。

そして機能ごとにカラー定義をします:point_up_tone1:

_colors.sass
$color-globalHeader-background: $palette-sunnyRed
$color-globalFooter-background: $palette-sunnyRed
$color-articleBlock-background: $palette-cherryRed
$color-articleTag-background: $palette-sandGray
$color-modalBox-background: $palette-sunnyRed

このように機能(パーツ)ごとに変数を作って$palette-変数を参照します。

そして定義した変数をクラス名にあてて使うときはこういう感じです:point_up_tone1:

index.sass
.global-header
  background-color: $color-globalHeader-background

.global-footer
  background-color: $color-globalFooter-background

.articleBlock
  background-color: $color-articleBlock-background

.articleTag
  background-color: $color-articleTag-background

.modalBox
  background-color: $color-modalBox-background

カラー変数を機能ごとに定義して、しかもパレット変数を参照しているので手間が増えて一見冗長に見えるかもしれませんが、カラーパレットと機能に紐付いている色が明確になるので見てもわかりやすく管理がしやすいメリットがあります!

さらにこうしておくことで、色の付替えをしたくなったら_colors.sassを見て該当する機能(パーツ)を変えるだけでいいので定義の在り処が明確で変更がきたときも容易に対応が可能になります!

それでは、変更要望がきたときの例を見てみましょう:eyes:

変更に強く容易に対応できる例:muscle_tone1:

:white_large_square: 変更要望@1回目

変更箇所の会話

ディレクターさん『ヘッダーとフッターの背景色が変更になって、オレンジ色になりますが大丈夫ですか?』

我々「大丈夫ですよ〜、これって前の赤いカラーは廃止ですか?サイトのどこかではイキてます?たとえばモーダルも同じ赤色なんですが…』

ディレクターさん『あ、今回はヘッダーフッターのみでモーダルとか他のとこのは赤色のままです!』

我々『わかりました〜じゃあヘッダーフッターのカラーコード教えてもらっていいですか?」

デザイナーさん『#FEC062です!』

:information_source: 変更部分はこう

  • ヘッダー・フッターの背景色のみ変更
    • 新規色
  • ヘッダー・フッターの以前の色はサイト内の他の箇所でもつかわれている
    • 従来色も残す必要あり

というわけで、変更作業はこのように進めます

_palette.sass
$palette-trueWhite: #fff
$palette-trueBlack: #000
$palette-sunnyRed: #FF141C // sunnyRedは残る部分もあるのでそのまま
$palette-sunnyOrange: #FEC062 // ←新規色をパレットに追加
$palette-cherryRed: #D41655
$palette-sandGray: #999
_colors.sass
$color-globalHeader-background: $palette-sunnyOrange // sunnyOrangeに変更
$color-globalFooter-background: $palette-sunnyOrange // sunnyOrangeに変更
$color-articleBlock-background: $palette-cherryRed
$color-articleTag-background: $palette-sandGray
$color-modalBox-background: $palette-sunnyRed // ←そのまま従来色

わかりやすいまま作業できました:v_tone1:

:white_large_square: 変更要望@2回目

時は流れて…

変更箇所の会話

デザイナーさん『すみません、オレンジ色にしたヘッダーとフッターなんですが微調整ということになったのでもう少しピンク寄りのオレンジになりました。』

我々『わかりました〜、最初に指定されたオレンジ色は廃止ですか?』

デザイナーさん『廃止です!』

_palette.sass
$palette-trueWhite: #fff
$palette-trueBlack: #000
$palette-sunnyRed: #FF141C
//$palette-sunnyOrange: #FEC062 //廃止なので消しても可
$palette-pinkyOrange: #FEB794 // 新規色を追加
$palette-cherryRed: #D41655
$palette-sandGray: #999
_colors.sass
$color-globalHeader-background: $palette-pinkyOrange // pinkyOrangeに変更
$color-globalFooter-background: $palette-pinkyOrange // pinkyOrangeに変更 
$color-articleBlock-background: $palette-cherryRed
$color-articleTag-background: $palette-sandGray
$color-modalBox-background: $palette-sunnyRed

$palette-sunnyOrange->$palette-pinkyOrangeになりました。

ここではあくまで例なのでヘッダーとフッターだけなので影響が少ないですが、仮に150箇所で$palette-sunnyOrangeを利用していたら大変ですね…でもそういう場合でも_colors.sass内を一括置換すればこういうときでも一瞬で間違いを犯さずに変更できます:v_tone1:

色の変数の命名について:bulb:

$palette-sunnyRedなどと例では付けましたが、プロジェクトによっては最初の段階でそれぞれの色に対してアイデンティティやコードネームみたいなものを設定しておくといいかもしれません。

例えば#A4D293はアボカドっぽい色だからコードネーム「avocado」で〜という感じです。
こうしておくとチャットや口頭で会話するときも、

「あの色の部分なんですが〜」
『どこの色です??』

みたいなことが起こる確率が減ってハッピーかもしれません:hotsprings:

もしくはカラーコードを厳格にツールを使って定義&共有できるのであれば、

$palette-A4D293 というようにHEX値をそのまま使うのがよいケースもあるかもしれません。

ちなみに

こういう色の名前を出してくれるジェネレータもあったりするので、場合によっては利用して各々でベストな命名をするといいかもしれません。


:warning: よくある変数名について

$palette-red-primary
$palette-red-secondary
$palette-red-third
$palette-red-tertiary
$palette-red-quaternary
$palette-red
$palette-red-lighter
$palette-red-lightest
$palette-red-darker
$palette-red-darkest
$palette-red
$palette-lightRed1
$palette-lightRed2
$palette-darkRed1
$palette-darkRed2

これらも場合によっては便利&あまりにも色数が膨大なプロダクトだとこうせざるを得ないケースはあるでしょう。

ただこれらは後々見返した際に

  • primaryとは?secondaryとは?
    • secondaryが案外多くてsecondaryの定義が曖昧に…
  • lighterとlightestの中間色やさらに明るい色が出てきた…
    • middleLighter?
    • ultraLight??
      • カオスだ…
  • lighter1とlighter2の順番逆のがよさそう
    • うわー
    • lighter1と2の中間が欲しい…
      • うわー
        • ていうかベースになるredより明るい赤色がでてきた
          • うわー

となりがちなのでご利用は計画的に:innocent:

より効率化するには:thinking:

sassは関数やmixinを作ることができるので、接頭辞$palette-を自動付与するようにしたり、$color-を作るときに構造化したり、$color-hogehogeをもっと簡単に呼び出したりなどもやろうと思えばできると思います。

こちらのやりかたなどを参考にすると便利関数化したりでより効率化は図れますが、チーム共有や運用の手間はさらに1個増えるかもしれません。

:white_check_mark: 以上です

デザインが絡む以上CSSであってもカラーパレットを作るっていうのはよく考えるとあたりまえではありますね…:thinking:

未来の自分が読んだときのためや来たる変更に備えておくと未来の自分が幸せになります:grinning:

cureapp
「治療アプリ」という診療現場における新しい疾患治療ツールを開発するプログラム医療機器ベンチャーです。
https://cureapp.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした