//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;
}
'프론트엔드 공부 > scss' 카테고리의 다른 글
scss @import 파일가져오기 / css > scss 변경(parcel bundler)과 url 리팩토링 (0) | 2021.05.28 |
---|---|
scss 컬러내장함수 (0) | 2021.05.28 |
scss @function(){} (0) | 2021.05.28 |
scss 반복문(for $i from 1 from n){} (0) | 2021.05.28 |
scss @mixin의 재활용(초깃값 설정과 키워드인수설정) / @content 추가기능 (0) | 2021.05.28 |