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

Sassで連想配列が使えるようになってたので使ってみた。

More than 3 years have passed since last update.

Sassで連想配列が使えずに泣いたあの日はもういない。
無駄に配列2つ用意したあの日よグッバイ。

ということで、早速サンプルいってみよう。

style.scss
$member_color:(
  madoka:pink,
  homura:black,
  sayaka:blue,
  kyoko:red,
  kyube:white
);

@each $name, $color in $member_color {
  .color_#{$name} {
     color: $color;
  }
}

コンパイルするとこんな感じで書きだされます。

style.css
.color_madoka {
  color: pink;
}

.color_homura {
  color: black;
}

.color_sayaka {
  color: blue;
}

.color_kyoko {
  color: red;
}

.color_kyube {
  color: white;
}

簡単に解説すると、

style.scss
$member_color:(//変数の中身をを括弧で囲めばおk
  madoka:pink,
  homura:black,
  sayaka:blue,
  kyoko:red,
  kyube:white
);

@each $name, $color in $member_color {//$nameと$colorはkeyとvalueが順番に入る模様。
  .color_#{$name} {
     color: $color;
  }
}

という感じです。

kid84
atrae
People Techカンパニーとして、転職サイトGreen, ビジネスマッチングアプリyenta, 組織改善プラットフォームwevoxなどのサービスを運営。全ての社員が誇りを持てる組織と事業の創造にこだわり、関わる人々がファンとして応援したくなるような魅力ある会社であり続けることを目指しています。
https://atrae.co.jp/
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