프론트엔드 공부/scss
scss each in문(list, map)
maggieH
2021. 5. 28. 10:56
//scss는 자바스크립트와 유사하게 number,string,boolean,color,list(배열),map(object개념) 이라는 개념들을 사용가능
//scss
$number :1;
$string:bold;
$color: red;
$boolean: true;
$null : null;
$list : orange, royalblue, yellow;
$map: (
o:orange,
r:royalblue,
y:yellow);
@each $c in $list{
.listbox{
color:$c;
}
}
@each $k, $v in $map{
.mapbox-#{$k}{
color:$v;
}
}
//css
.listbox {
color: orange;
}
.listbox {
color: royalblue;
}
.listbox {
color: yellow;
}
.mapbox-o {
color: orange;
}
.mapbox-r {
color: royalblue;
}
.mapbox-y {
color: yellow;
}