Sassの配列で複数の色を管理する

カテゴリ毎にカラーが決まっていて、そのカラーをSassの配列で管理しようとしたときに結構詰まったので方法をメモしておきます。

失敗例1

やりたかったことはSassの配列でカラーを管理する事なのですが、背景に指定するときなど一部rgbaで指定して透過にしたかったので、以下のようにrgbで配列に格納しました。

Sass

$category_colors: '231, 76, 60', '52, 152, 219', '46, 204, 113', '155, 89, 182', '52, 73, 94';

例として、.category-listの各文字色を変更、.category-iconの各背景色を変更してみます。

HTML

<ul class="category-list">
	<li class="type1">カテゴリA</li>
	<li class="type2">カテゴリB</li>
	<li class="type3">カテゴリC</li>
	<li class="type4">カテゴリD</li>
	<li class="type5">カテゴリE</li>
</ul>

<div class="category-icon-wrap">
	<img src="image.jpg">
	<div class="category-icon1">カテゴリA</div>
	<div class="category-icon2">カテゴリB</div>
	<div class="category-icon3">カテゴリC</div>
	<div class="category-icon4">カテゴリD</div>
	<div class="category-icon5">カテゴリE</div>
</div>

Sass

.category-list {
	@each $category_color in $category_colors {
		$key: index($category_colors, $category_color);
		.type#{$key} {
			color: rgb(#{$category_color});
		}
	}
}
@each $category_color in $category_colors {
	$key: index($category_colors, $category_color);
	.category-icon#{$key} {
		position: absolute;
		top: 50px * ($key - 1);
		left: 20%;
		background: rgba(#{$category_color}, 0.8);
	}
}

@eachはPHPのforeachみたいな感じで使えて、$keyに何番目の配列かを取得、$category_colorに配列の値が入っています。
これらを使って「rgb(#{$category_color})」や「rgba(#{$category_color}, 0.8)」のように指定しましたが、「required parameter $green is missing in call to function rgb」とエラーが出てCSSが出力されませんでした。
　

失敗例2

調べるとrgbaの指定はrgba(#xxxxxx, 0.8) のような形でも問題ないようなので、配列の形を変更してみました。

Sass

$category_colors: #E74C3C, #3498DB, #2ECC71, #9B59B6, #34495e;

Sass

配列内がrgbではなくなったので.category-listの文字色指定を変更してみました。

.category-list {
	@each $category_color in $category_colors {
		$key: index($category_colors, $category_color);
		.type#{$key} {
			color: $category_color;
		}
	}
}
@each $category_color in $category_colors {
	$key: index($category_colors, $category_color);
	.category-icon#{$key} {
		position: absolute;
		top: 50px * ($key - 1);
		left: 20%;
		background: rgba(#{$category_color}, 0.8);
	}
}

.category-listのみだとCSSの出力ができましたが、.category-iconも一緒に変換すると、先ほどと同じく「required parameter $green is missing in call to function rgb」とエラーが出ました。
　

成功例

独自で関数を作って実装する方法を見かけたので試してみました。

Sass

$category_colors: #E74C3C, #3498DB, #2ECC71, #9B59B6, #34495e;
@function hslac($color, $alpha) {
	@if(type-of($color) == "color") {
		@return hsla(hue($color), saturation($color), lightness($color), $alpha);
	}
	@else {
		@error "You didn't pass a color object";
	}
}

Sass

.category-list {
	@each $category_color in $category_colors {
		$key: index($category_colors, $category_color);
		.type#{$key} {
			color: hslac($category_color, 1);
		}
	}
}
@each $category_color in $category_colors {
	$key: index($category_colors, $category_color);
	.category-icon#{$key} {
		position: absolute;
		top: 50px * ($key - 1);
		left: 20%;
		background: hslac($category_color, 0.8);
	}
}

エラーが出ずに以下のCSSが出力されました。

CSS

.category-list .type1 {
  color: #e74c3c; }

.category-list .type2 {
  color: #3498db; }

.category-list .type3 {
  color: #2ecc71; }

.category-list .type4 {
  color: #9b59b6; }

.category-list .type5 {
  color: #34495e; }

.category-icon1 {
  position: absolute;
  top: 0px;
  left: 20%;
  background: rgba(231, 76, 60, 0.8); }

.category-icon2 {
  position: absolute;
  top: 50px;
  left: 20%;
  background: rgba(52, 152, 219, 0.8); }

.category-icon3 {
  position: absolute;
  top: 100px;
  left: 20%;
  background: rgba(46, 204, 113, 0.8); }

.category-icon4 {
  position: absolute;
  top: 150px;
  left: 20%;
  background: rgba(155, 89, 182, 0.8); }

.category-icon5 {
  position: absolute;
  top: 200px;
  left: 20%;
  background: rgba(52, 73, 94, 0.8); }

Sassで複数の色を管理するデモページ

【参考サイト】

• Sassメモ – Qiita
• Sassの@each内でインデックスキーを取得して別配列の値をセット – Qiita
• 【Sass】配列を@each文でリストとして出力 – Qiita
• Sassメモ：rgba()値を簡単に出す | Hack
• css – Using a Sass variable mapped to an hsl value doesn’t work when trying to use it with hsla – Stack Overflow