Edited at
AtraeDay 15

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;
}
}


という感じです。