본문 바로가기

프론트엔드 공부/scss

scss each in문(list, map)

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