[Sass] @extend 문법 사용 방법

 

1. .scss파일에서 공통으로 작성할 코드를 임시클래스로 작성한다.

%임시클래스명 { 공통 코드 작성 }

%btn {

    margin: 5px;

    padding: 5px;

    border: 2px solid black;

    border-radius: 10px;

    color: black;

}

 

 

2. extend 문법을 이용하여 공통 코드 넣기

@extends 임시클래스명;

 

.red-btn {

    @extend %btn;

    background-color: red;

}

.blue-btn {

    @extend %btn;

    background-color: blue;

}

.yellow-btn {

    @extend %btn;

    background-color: yellow;

}

 

 

▶ 임시클래스는 단독으로 컴파일 되지 않는다.

 

▶ @extend 뒤에 %로 안 만들고 일반 클래스를 써도 된다.