[SCSS] @extend로 연관성있는 선택자 속성 가져오기

개념

앞에서 배운 @mixin과 비슷한 기능을 가진 문법이 있다. 바로 @extend이다.

어떻게 쓰이는 지는 바로 예시를 통해 알아보자.

 

방법

@extend 클래스(.) 사용

/* SCSS */
.btn {
    border: 1px solid #000;
    background-color: #fff;
    width: 150px;
    line-height: 30px;
    outline: none;
    cursor: pointer;
    color: #fff;
}

.a-btn {
    @extend .btn;
    background-color: skyblue;
    border-color: blue;
}

/* Compiled CSS */
.btn, .a-btn {
    border: 1px solid #000;
    background-color: #fff;
    width: 150px;
    line-height: 30px;
    outline: none;
    cursor: pointer;
    color: #fff;
}

.a-btn {
    background-color: skyblue;
    border-color: blue;
}

@extend .클래스명을 사용할 경우 컴파일된 CSS로 봤을 때 .btn, .a-btn의 형식으로 하나로 묶이는 경우가 생긴다.

SCSS의 .btn 스타일 속성이 그대로 .btn이라는 클래스 이름과 함께 컴파일된 것이다. 하지만, 가끔 .btn, .a-btn이 지저분해 보일 경우가 있을 수도 있다. .btn이라는 이름은 불러오지 않고, .btn의 스타일 속성만 불러올 수는 없을까?

 

@extend %클래스 사용

/* SCSS */
%btn {
    border: 1px solid #000;
    background-color: #fff;
    width: 150px;
    line-height: 30px;
    outline: none;
    cursor: pointer;
    color: #fff;
}

.a-btn {
    @extend %btn;
    background-color: skyblue;
    border-color: blue;
}

.b-btn {
    @extend %btn;
    background-color: tomato;
    border-color: red;
}

/* Compiled CSS */
.a-btn, .b-btn {
    border: 1px solid #000;
    background-color: #fff;
    width: 150px;
    line-height: 30px;
    outline: none;
    cursor: pointer;
    color: #fff;
}

.a-btn {
    background-color: skyblue;
    border-color: blue;
}

.b-btn {
    background-color: tomato;
    border-color: red;
}

@extend 뒤에 .클래스명이 아닌 %클래스명을 입력해주면 CSS로 컴파일됐을 때 클래스 자체를 불러오는 게 아닌 내용만 불러오는 것을 볼 수 있다. 확실히 .클래스명보다 훨씬 더 깔끔해보이고 한 눈에 보기도 편하다. 따라서, @extend를 사용할 때는 %를 사용하는 편이 좋다.

 

@mixin VS @extend

/* SCSS - Use @mixin */
@mixin btn {
    background-color: #fff;
}

.a-btn {
    @include btn;
}

.b-btn {
    @include btn;
}

/* Compiled CSS */
.a-btn {
    background-color: #fff;
}

.b-btn {
    background-color: #fff;
}

/* SCSS - Use @extend */
%btn {
    background-color: #fff;
}

.a-btn {
    @extend %btn;
}

.b-btn {
    @extend %btn;
}

/* Compiled CSS */
.a-btn, .b-btn {
    background-color: #fff;
}

솔직히 어떻게 쓰나 결과는 같다. 하지만, 사소하게 다르기 때문에 쓰임새 맞게 쓴다면 조금 더 깔끔하게 클린 코딩을 할 수 있다. @mixin은 독립적인 '아싸'이기 때문에, 클래스마다 같은 속성이더라도 하나로 합쳐지지 않는다. 하지만, @extend의 경우 연관된 속성은 모두 하나로 합치는 '인싸'이므로 콤마(,)로 연결하여 하나로 합쳐버린다.

 

정리하자면, 여러 개의 버튼이나 여러 개의 li 항목 등 서로 연관있는 복수 개의 요소들에 공통 스타일을 줄 땐 @extend를 사용하는 게 좋고, 서로 연관은 없지만 공통된 스타일이 있을 경우에는 @mixin을 사용하는 게 좋다.

 

1. @extend %이름
2. @extend를 사용하면 .a-btn, .b-btn, .c-btn 이런 식으로 하나로 묶인다.
3. 따라서, 서로 연관성있는 요소들에 공통 스타일을 줄 때 사용하자.
4. @mixin은 @extend와 스타일을 불러온다는 기능은 같지만, 하나로 묶이지는 않는다는 차이점이 있다.