특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우가 종종 있다.
이럴 경우 선택자의 확장 기능을 사용할 수 있다.
@extend 선택자;
SCSS
.btn {
padding: 10px;
margin: 10px;
background-color: blue;
}
.btn-danger {
@extend .btn;
background-color: red;
}
⬇️
CSS
.btn, .btn-danger {
padding: 10px;
margin: 10px;
background-color: blue;
}
.btn-danger {
background-color: red;
}
@extend
는 다음과 같은 문제를 고려해야 한다.
.btn-danger
)가 어디에 첨부될 것인가?결과적으로 Extend(확장) 기능은 무해하거나 혹은 유익할 수도 있지만 그만큼 부작용을 가지고 있을 수 있다.
따라서 Extend는 사용을 권장하지 않으며, 위에서 살펴본 Mixin을 대체 기능으로 사용하길 권장한다.