Sassの配列の書き方
$items: sample1, sample2, sample3;
@each $item in $items {
.#{$item}--bg {
background: url(./img/#{$item}_bg.png) 0 0 no-repeat;
}
}
出力結果
.sample1-bg {
background: url(./img/sample1_bg.png) 0 0 no-repeat;
}
.sample2-bg {
background: url(./img/sample2_bg.png) 0 0 no-repeat;
}
.sample3-bg {
background: url(./img/sample3_bg.png) 0 0 no-repeat;
}
Sassの連想配列の書き方
$sample_color:(
abc:pink,
def:black,
ghi:blue,
jkl:red
);
@each $sample, $color in $sample_color {
.color--#{$sample} {
color: $color;
}
}
出力結果
.color--abc {
color: pink;
}
.color--def {
color: black;
}
.color--ghi {
color: blue;
}
.color--jkl {
color: red;
}