달밤에 코딩하기/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;
}