[Sass] 配列に値が含まれているか判定する方法

Sassで配列に値が含まれているかどうかを判別してcssを出力したかったのでまとめました。

この方法を使えば、例えば薄い色の背景色を指定した変数を配列にまとめてforで回して薄い色の背景色の場合は濃い色のテキストカラーを指定したりできます。

Sassのindex関数を使う

Sassにはindexという、配列の中にそのキーが何番目にあるかを判定してくれる関数があります。
以下のように記述します。

index(配列,判別する値）;

実際にテストしてみます。

$test_array: hoge1, hoge2, hoge3, hoge4;
$content: index($test_array, hoge4);
.test {
	content: $content;
}

結果は以下のとおりです。

.test {
	content: 4;
}

値がないか判別する

このindex関数を使って値が配列に存在するかどうかを判定する条件文を書いていきます。
＄test_arrayにないhoge5を指定して値がない場合(null)の場合は 「content: ありません」が出力されるように指定します。

$test_array: hoge1, hoge2, hoge3, hoge4;
$content: index($test_array, hoge5);
.test {
	 content: $content;
	 @if $content == null { //配列にない場合を「null」で指定します
		 content: "ありません";
	 }
	 @else {
		 content: "ありました";
	 }
 }

以下のように出力され、無事判定できました。

.test {
	 content: "ありません";
 }