SASS(SCSS) @extend를 이용한 공통 스타일 적용하기

sass는 타 선택자의 css를 그대로 상속하여 공유가 가능합니다.

공통으로 사용하는 속성을 모아 일부분만 동일하게 가져가고 부분적으로 다른 스타일을 정의하는 경우가 있습니다.

이럴 경우 보통 공통 속성이 사용되는 클래스를 만들고, 다른 속성이 사용되는 클래스 하나를 더 만들어 css 스타일을 입히는 방법을 사용합니다.

하지만 scss에서는  @extend를 사용하면 편리합니다.

 

예를 들어 여러 가지 버튼을 만들 때 사용하면 쉽게 작업할 수 있습니다.

 

/* scss */
.btn {   // 기본 그레이 버튼
    display: inline-block;
    padding: 10px 20px;
    color: #fff;
    background-color: silver;
}
.btn-green {    // 그린 버튼
    @extend .btn;
    background: green;
}
.btn-pink {    // 핑크 버튼
    @extend .btn;
    background: pink;
}

/* css - Compiled to */
.btn,.btn-green,.btn-pink {
    display:inline-block;
    padding:10px 20px;
    color:#fff;
    background-color:silver
}
.btn-green{
    background:green
}
.btn-pink{
    background:pink
}

 

id나 class를 사용하여 확장도 가능하며, %를 이용한 선택자를 만들 수 있습니다. % 선택자는 컴파일될 때 출력되지 않습니다.

 

/* scss */
%btn-style {  // %선택자로 만듬, 컴파일 시 css에 출력되지 않음
    display: inline-block;
    border-radius: 10px;
    padding: 10px 30px;
    font-size: 16px;
    border: 1px solid gray;
}

.line-btn {
    @extend %btn-style;   // @extend 사용
    &-red {
        @extend %btn-style;   // @extend 사용
    	border-color: red;
    }
}


/* css - Compiled to */
.line-btn,.line-btn-red{
    display:inline-block;
    border-radius:10px;
    padding:10px 30px;
    font-size:16px;
    border:1px solid gray
}
.line-btn-red{
    border-color:red
}

 

 

상위 선택자 참조 &를 이용하여 다음과 같이 코드를 짤 수도 있습니다.

컴파일된 결과는 위와 동일합니다.

/* scss */
.btn {   // 기본 그레이 버튼
    display: inline-block;
    padding: 10px 20px;
    color: #fff;
    background-color: silver;
    
    &-green {    // 그린 버튼
        @extend .btn;
        background: green;
    }
    &-pink {    // 핑크 버튼
        @extend .btn;
        background: pink;
    }
}

 

@extend를 사용하여 hover효과, disabled일 때의 버튼은 물론이고 여러 가지 디자인의 버튼을 스타일링할 수 있습니다.

아래 버튼 sample코드를 참고해 보세요

 

See the Pen css 버튼 @extend sample by woosohee (@venusy) on CodePen.