Sass でリスト変数を使用する

Sass では、複数の値をまとめて扱えるリスト型変数が用意されています。 @each でリスト内をループしたり関数を使って任意の値を取り出したりすることができます。

参考：Sass Documents

リスト型変数定義

Sass ファイル内でリスト型の変数を定義するには、次のような構文を使用します。値の区切りは、スペース区切りまたはカンマ区切りで指定することができます。

$変数名: 値1 値2 値3;

例えば、フォントや共通のマージンを定義したい場合、次のように定義します。

$_font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
$_default-margin: 10px 10px 0 0;

body {
  font-family: $_font-family;
}
.base_box {
  margin: $_default-margin;
}

上記定義をコンパイルすると変数部分が置き換わり CSS として次のように出力されます。

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.base_box {
  margin: 10px 10px 0 0;
}

リスト型は、リストの値にリストを指定することもできます。

$_listval1: 5px 10px, 15px 20px;

または

$_listval12: (5px 10px) (15px 20px);

リストを順に参照する @each

リストの要素を順に参照するには、次のような @each を使った構文でループ処理します。

@each 変数 in <リスト型> {
  スタイル定義
}

例えば、あるカテゴリー名の配列を用意してアイコン用の画像ファイルにカテゴリー名を含めるルールを用意したとします。

用意するカテゴリーは、

• home
• about
• policy
• contact

アイコンファイルは、

• icon_home.png
• icon_about.png
• icon_policy.png
• icon_contact.png

のように用意したとします。クラス名とアイコンのファイル名の両方で値を使うよう定義しています。

$catlist: home, about, company, contact;

#nav{
	ul{
		li{
			@each $name in $catlist{
				&.icon_#{$name}{
					a{
						background: url(../assets/img/icon_#{$name}.png) no-repeat 12px 15px;
						&:hover{
							background: url(../assets/img/icon_#{$name}.png) no-repeat #9EBBCF 12px 15px;
						}
					}
				}
			}
		}
	}
}

リスト用の関数

Sass のリスト型を操作するために、次のような関数が用意されています。

length($list)

リスト内の要素数を取得する事ができます。

length(10px)  //・・・ 1 が返ります。
length(10px 10px 0 0)  //・・・ 4 が返ります。
length((width: 10px, height: 15px))  //・・・ 2 が返ります。

nth($list, $n)

リストの指定した位置にある値を取得します。

nth(10px 15px 20px, 2)  //・・・ 15px が返ります。
nth(("Helvetica Neue", Helvetica, Arial, sans-serif), 3)  //・・・ Arial が返ります。
nth((width: 10px, height: 15px), 2)  //・・・ height: 15px が返ります。

リスト型のインデックスは、 1 始まりでインデックスに負の値を指定すると、リストの末尾からの位置を指定することができます。

nth(10px 15px 20px, -1)  //・・・ 20px が返ります。

set-nth($list, $n, $value)

指定した位置の要素を置換した新しいリストを作成します。

$list: 1, 2, 3, 4, 5;
$new-list: set-nth($list, 3, "BBB");  //・・・ 1, 2, "BBB", 4, 5 が返ります。

join($list1, $list2, [$separator, $bracketed])

2つのリストを結合した新しいリストを作成します。

$list1 : tama, mike;
$list2 : pochi, hachi;
 
$result : join($list1, $list2);  //・・・ tama, mike, pochi, hachi が返ります。

append($list, $val, [$separator])

リストの末尾に1つの要素を追加したリストを作成します。

$list : apple, orange, pineapple;
$list : append($list, banana);  //・・・ apple, orange, pineapple, banana が返ります。

index($list, $value)

指定した値がリストのどの位置にあるか調べます。

$list : apple, orange, pineapple;
index($list, orange)  //・・・ 2 が返ります。

指定した値が見つからない場合は null を返します。

list-separator($list)

リストのセパレータ文字を取得します。

$list : apple, orange, pineapple;

list-separator($list)  //・・・ space が返ります。

is-bracketed($list)

ブラケットで囲まれたリストか調べます。

is-bracketed(10px 15px 20px)  //・・・ false が返ります。
is-bracketed([10px, 15px, 20px])  //・・・ true が返ります。