달밤에 코딩하기/Sass & SCSS
#17 - SCSS 재사용 - 확장(@expand)
Rosa.Kim
2021. 6. 11. 20:08
확장
특정 선택자의 스타일을 상속할 때 사용.
Compile된 CSS가 커지거나 원치않는 부작용이 발생될 수 있으므로 Mixin을 사용하는 것이 좋다.
기본 구조
SCSS
@extend 선택자;
사용 예시
SCSS
.class1{
width : 100px;
height : 200px;
}
.class2{
@extend .class1;
color : red;
}
Compile 된 CSS
.class1, .class2{
width : 100px;
height : 200px;
}
.class2{
color : red;
}