Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

やりたかったこと。

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

雰囲気オブジェクト
{
  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
ありがとうございます!!

niever66
またちょっと根無し草に逆戻りです
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away