Sass

Sassの@each内でインデックスキーを取得して別配列の値をセット

More than 5 years have passed since last update.

特定のclass名ごとに、色を変えたい・・・といったケースでの話。

連想配列や多次元配列が使えないようなので、とりあえず思いついた方法をメモ。


手順.1


同じ長さの配列を2つ定義

// Sass

$category_names: categoryA, categoryB, categoryC, categoryD;
$category_colors: #000, #f00, #0f0, #00f;


手順.2


each文で、配列:$category_namesの値をclass名にセットしつつ、配列:$category_colorsの値で文字色に挿入

// Sass

@each $class_name in $category_names {
$index_key: index($category_names, $class_name);

.#{$class_name} {
color: nth($category_colors, $index_key);
}
}

インデックスキーは

index(配列名, キーを取得したい値);

値は

nth(配列名, インデックスキー);

で、それぞれ取得

出力されたコードは、下記のようになる

// CSS

.categoryA { color: black; }
.categoryB { color: red; }
.categoryC { color: lime; }
.categoryD { color: blue; }


その他


@eachのループ外では、任意のインデックスキーを数値指定

.hoge {

color: nth($category_colors, 1);
}

その際、最初のキーは 0 ではなく 1 から始まる点に注意

参考URL

http://cutupworks.ldblog.jp/archives/12353077.html