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

特定の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