@extend

확장(Extend)

특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우가 종종 존재합니다. 이럴 경우에는 선택자의 확장 기능을 사용할 수 있습니다.

@extend 선택자;

// SCSS
.btn {
    padding: 10px;
    margin: 10px;
    bakcground-color: blue;
}

.btn-danger {
    @extend .btn;
    background-color: red;
}

// CSS
.btn, .btn-dander {   // 다중 선택자로 컴파일이 된다
    padding: 10px;
    margin: 10px;
    background-color: blue;
}

.btn-danger {
    background-color: red;    // 덮어쓰게 된다. 우선순위가 같다면 마지막에 작성된 스타일이 적용됨.
}

결과를 보면 , 로 구분되는 다중 선택자(Multiple Selector)가 만들어 졌습니다.

사실 @extend는 다음과 같은 문제를 고려해야 합니다.

1. 현재 선택자가(위 예제에서는 .btn-danger) 어디에 첨부될 것인지

2. 원치 않는 부작용이 초래가 되는지

3. 이 한 번의 확장을 얼마나 큰 CSS가 생성되는지

코드를 입력하세요

// SCSS
.cotainer {
    width: 300px;
    height: 300px;
    background-color: red;
    
    .item {
        widht: 200px;
        height: 200px;
        background-color: blue;
        
        .icon {
            widht: 100px;
            height: 100px;
            background-color: green;
        }
    }
}

.wrapper {
    .new-icon {
        @extend .icon;
    }
}

// CSS
.container {
    widht: 300px;
    height: 300px;
}

.container .item {
    widht: 200px;
    height: 200px;
    background-color: blue;
}

.container .item .icon, .container .item .wrapper .new-icon, .wrapper .container .item .new-icon {
    width: 100px;
    height: 100px;
    background-color: green;
}

이렇게 @extend를 사용하면 원하는 스타일을 갖게는되지만 조상 요소의 선택자가 의도하지 않은 결과를 갖게되는 부작용이 발생합니다.

결과적으로 확장(@extend) 기능은 무해하가 혹은 유익할 수도 있지만 그만큼 부작용을 가지고 있습니다. 따라서 확장 사용을 권장하지 않으며 앞에서 살펴돔 Mixin으로 재사용할 스타일을 정의하여 사용하는 것을 권장합니다.