scssの配列ループ＋変数でカテゴリ色分けなどを簡単にするよ！

配列＆ループを使って、同じようなものをコード少なくしたい。。。
試してみたら、コケるポイントがあったので、メモメモ。

やりたかったこと。

こんな感じのものがあって、

雰囲気オブジェクト

{
  category: cate1,
  color: color1
},
{
  category: cate2,
  color: color2
},
{
  category: cate3,
  color: color3
}

これを、scssの配列を使って↓こんな感じにしたい。

仕上げたいcss

.list-cate1{
  background: color1;
}
.list-cate2{
  background: color2;
}
.list-cate3{
  background: color3;
}

やったこと。

前提。

色は変数で設定しておきます。

scss：色の変数設定

$cateColor-cate1: #cate1なカラー;
$cateColor-cate2: #cate2なカラー;
$cateColor-cate3: #cate3なカラー;

こちらができたやり方です。

カテゴリ名と色の変数をそれぞれ順番をそろえて配列に入れます。

scss：配列に設置

$categories: "cate1", "cate2", "cate3";
$color: #{$cateColor-cate1}, #{$cateColor-cate2}, #{$cateColor-cate3};

indexを使って、それぞれ取り出します。

scss：CSS書き出し部分ループ

@each $category in $categories {
  $n: index($categories, $category);
  $color: nth($color, $n);
    .cate-#{$category} {
    background: $color;
  }
}

こちらではうまくいかなかったです。

scss：CSS書き出し部分ループ　例1

@each $category in $categories {
  .cate-#{$category} {
    background: $cateColor-#{$category};
  }
}

css：結果

コンパイルエラー
$cateColor-　ってなんやねん。知らんわ。

それを乗り越えても、いったん色変数を配列にいれず、ループの中で変数名を作り出しても変数の文字列のまま吐き出されるようです...

scss：CSS書き出し部分ループ　例2

@each $category in $categories {
  $colorName: "$cateColor-#{$category}";
  $color: #{$colorName};
  .cate-#{$category} {
    background: $color;
  }
}

scss：CSS書き出し部分ループ　例3

@each $category in $categories {
  $colorName: "$cateColor-#{$category}";
  $color: unquote($colorName);
  .cate-#{$category} {
    background: $color;
  }
}

css：例2&3の結果

.cate-cate1 {background: $cateColor-cate1; }
.cate-cate2 {background: $cateColor-cate2; }
.cate-cate3 {background: $cateColor-cate2; }

。。。。変数が文字列のままコンパイルされてるやんTT。

参考

http://5509.hatenablog.com/entry/2012/03/01/021535
ありがとうございました。（あ、、、2012年。。。。）

※追記　－　シンプルになった！

volkuwabaraさんに教えていただきまして、参考先をもとに修正しました！
コードスッキリ～。

scss：連想配列使えたよ!

$categoryColors:(
  cate1: #{$cateColor-cate1},
  cate2: #{$cateColor-cate2},
  cate3: #{$cateColor-cate3}
);

@each $category, $color in $categoryColors {
  .cate-#{$category} {
    background: $color;
  }
}

参考

http://qiita.com/kid84/items/568b0c8d8dd9aafcd706
ありがとうございます！！