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

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

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

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:(//変数の中身をを括弧で囲めばおｋ
  madoka:pink,
  homura:black,
  sayaka:blue,
  kyoko:red,
  kyube:white
);

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

という感じです。