Sass(SCSS)のマップを利用したカラーコード管理

Posted on November 21th, 2016
Category : Tips

Sass(SCSS)でのカラーコード管理方法のひとつとして、マップを用いたら良さそうと思いやってみたものです。もっと便利な感じにできそうですし、そこまで使いやすいと感じたわけでもないですが、そのまま消すのもあれだったので備忘録として残しておこうと思います。

Sassでカラーコードを管理しときたいなってとき、自分の場合はそれ用のscssファイルとか用意し、そこに下記のような感じで各カラーを変数定義しておくことが多いです。

SCSS

$color-red       : #e74c3c;
$color-red-light : #f09188;
$color-red-dark  : #b82617;

$button-color        : #333;
$button-hover-color  : #888;
$button-active-color : #2ecc71;

$sns-twitter  : #55acee;
$sns-facebook : #3b5998;
$sns-gplus    : #dc4e41;

// usage
.elements {
	color: $color-red;
}

慣れもあってか上記方法でも特別不便だと感じたことはないのですが、なんとなくこれをマップで管理したらどうだろうと思いやってみたのでその備忘録です。

まず、下記のような関数を用意します。

SCSS

$palettes: (
	'red': (
		'default': #e74c3c,
		'light'  : #f09188,
		'dark'   : #b82617
	),
	'button': (
		'default' : #333,
		'hover'   : #888,
		'active'  : #2ecc71
	),
	'sns': (
		'twitter'  : #55acee,
		'facebook' : #3b5998,
		'gplus'    : #dc4e41
	),
);

@function palette($palette-group, $palette-type: 'default') {
	@return map-get(map-get($palettes, $palette-group), $palette-type);
}

上記記述後、これを使用する際は下記のような形で記述していきます。
具体的にはカラーコードを出力したい箇所にpalette($palette-group, $palette-type);と記述していき、その際に引数として先ほど紹介したソースで用意したグループとタイプを指定します。
記述する際に最低現必要なのは第1引数であるグループで、今回のサンプルソースでいうと「red」「button」などがそれにあたります。
ただ、サンプルでいう「sns」のような場合は「default」となるものがないので、このような使い方をする際は第1・第2の両方を記述する必要があります。

SCSS

.elements01 {
	background: palette('red');
}
.elements02 {
	background: palette('red', 'light');
}
.elements03 {
	background: palette('red', 'dark');
}
.elements04 {
	background: rgba(palette('red'), .5);
	color: lighten(palette('red'), 20%);
}

.button {
	background: palette('button');
	&:hover {
		background: palette('button', 'hover');
	}
	&:active {
		background: palette('button', 'active');
	}
}

.sns {
	&-twitter {
		background: palette('sns', 'twitter');
	}
	&-facebook {
		background: palette('sns', 'facebook');
	}
	&-gplus {
		background: palette('sns', 'gplus');
	}
}

第1引数となるグループは大まかな分類とし、例えば赤系のカラー指定なのであれば「red」としたり、コンポーネントなどであれば「button」といった感じにしておきます。

第2引数のタイプは小分類や状態といったより詳細的なものを意味し、例えば先ほども例としてあげた「red」であれば同じ赤でも明度や彩度が異なるものにしたり、「button」であれば:hoverや:active時といった各状態といった感じにしておきます。

上記を踏まえ、例えば赤（red）で且つ明るいもの（light）を使用したいと思ったときは、palette('red', 'light');と記述することで#f09188とコンパイルされ、もしpalette('red');のように第1引数のみで記述した場合は、「default」で指定したものが使用されるので#e74c3cとコンパイルされることになります。
また、サンプルソースの.elements04で指定しているようにすれば、rgba()とかlighten()を用いて指定することもできます。

とりあえずやってはみたものの、冒頭にもあるようにもっと便利で且つ使いやすくできそうな気はするので、また気が向いたら考えてみようかなと思います。
もし、こういったカラーコード管理でおすすめな方法とかあれば是非教えてください。