<div class="box"></div>
<div class="box built-in"></div>
<div class="box built-in2"></div>
.box{
$color:royalblue;
width:200px;
height:200px;
margin:20px;
border-radius:10px;
background-color:$color;
&.built-in{
background-color:lighten($color,10%);
&:hover{ background:darken($color,10%);
}
}
&.built-in2{
background-color:mix($color,red);
&:hover{ background:grayscale($color);
}
}
}
//saturte,grayscale,desaturate,lighten,darken,invert,rgba($color,0.5)..
'프론트엔드 공부 > scss' 카테고리의 다른 글
scss each in문(list, map) (0) | 2021.05.28 |
---|---|
scss @import 파일가져오기 / css > scss 변경(parcel bundler)과 url 리팩토링 (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 |