@extend

• 원하는 선택자의 모든 CSS 속성을 가져와서 사용하고 싶으면 @extend를 사용하면 된다.

@extend 선택자;

예제

복사 대상 선택자 btn의 속성을 @extend를 활용해 복사하여 다른 버튼들의 CSS 속성에 붙여넣고 추가 CSS 속성을 적용해보자.

index.html

<button class="btn">initial button</button>
<div class="buttons">
  <button class="order">order now</button>
  <button class="add">add charset</button>
  <button class="checkout">check out</button>
</div>

style.scss

.btn {
    width: 200px;
    padding: 7px;
    background-color: #fff;
    font-size: 18px;
    text-transform: capitalize;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.order {
    @extend .btn;
    background-color: purple;
    color: #fff;
}

.add {
    @extend .btn;
    background-color: yellowgreen;
    color: #fff;
}

.checkout {
    @extend .btn;
    background-color: transparent;
    color: #000;
    border: 1px solid #000;
}

style.css

.btn, .checkout, .add, .order {
  width: 200px;
  padding: 7px;
  background-color: #fff;
  font-size: 18px;
  text-transform: capitalize;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

.order {
  background-color: purple;
  color: #fff;
}

.add {
  background-color: yellowgreen;
  color: #fff;
}

.checkout {
  background-color: transparent;
  color: #000;
  border: 1px solid #000;
}

플레이스 홀더 선택자 %

• @extend로 복사된 선택자를 플레이스 홀더 선택자 %를 사용하여 컴파일된 CSS 코드에서 감출 수 있다.

예제

위에서 작성했던 style.scss의 btn 클래스를 . 대신에 % 기호를 사용해보자.
styles.scss

%btn {
    width: 200px;
    padding: 7px;
    background-color: #fff;
    font-size: 18px;
    text-transform: capitalize;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

.order {
    @extend %btn;
    background-color: purple;
    color: #fff;
}

.add {
    @extend %btn;
    background-color: yellowgreen;
    color: #fff;
}

.checkout {
    @extend %btn;
    background-color: transparent;
    color: #000;
    border: 1px solid #000;
}

style.css

.checkout, .add, .order {
  width: 200px;
  padding: 7px;
  background-color: #fff;
  font-size: 18px;
  text-transform: capitalize;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

.order {
  background-color: purple;
  color: #fff;
}

.add {
  background-color: yellowgreen;
  color: #fff;
}

.checkout {
  background-color: transparent;
  color: #000;
  border: 1px solid #000;
}

• 컴파일 결과를 확인해보면 플레이스 홀더 선택자 %를 사용해 SCSS 선택자의 CSS 스타일을 @extend로 복사해온 경우 컴파일된 CSS 코드에 .btn이라는 복사 대상이 된 선택자가 표시되지 않는 것을 볼 수 있다.
• 이렇게 %를 사용하면 좀 더 깔끔한 CSS 코드를 표시할 수 있다.