1. sass basic - extend
scss
// extend
%boxShape {
border-radius: 20px;
border: 3px solid #f00;
box-shadow: 0 3px 11px 0 rgba(0, 0, 0, .75);
}
#box1 {
@extend %boxShape;
&:hover {
background-color: #ccc;
}
}
#box2 {
@extend %boxShape;
}
css
#box2, #box1 {
border-radius: 20px;
border: 3px solid #f00;
box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.75);
}
#box1:hover {
background-color: #ccc;
}
mixin 과 extend 의 차이점
- mixin은 속성은 같은데 값이 다를 때,
- 같은 속성과 같은 값이 여러군데 쓰일 때,