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

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

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

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

例をみていきましょう。

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

_palette.sass

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

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

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

_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-変数を参照します。

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

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を見て該当する機能(パーツ)を変えるだけでいいので定義の在り処が明確で変更がきたときも容易に対応が可能になります！

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

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

変更要望@1回目

変更箇所の会話

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

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

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

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

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

変更部分はこう

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

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

_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 // ←そのまま従来色

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

変更要望＠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内を一括置換すればこういうときでも一瞬で間違いを犯さずに変更できます

色の変数の命名について

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

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

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

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

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

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

ちなみに

http://chir.ag/projects/name-that-color/

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

よくある変数名について

$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より明るい赤色がでてきた

うわー