SCSS 활용 팁 4. @extend를 이용한 스타일 상속

 

중복된 스타일을 여러번 반복해서 써야하는 경우 유용하게 사용할 수 있는 @extend에 대해 알아보겠습니다.

@extend

@extend는 SCSS에서 스타일 코드의 재사용성을 높이기 위해 제공되는 기능 중 하나로, 스타일을 복사해서 사용하는 @mixin과 달리 선택자가 다른 선택자의 스타일을 상속받는 방식으로 동작합니다. 

/* SCSS */

.button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: blue;
  color: white;
}

.primary-button {
  @extend .button;
  background-color: darkblue;
}


/* css */

.button, .primary-button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: blue;
  color: white;
}

.primary-button {
  background-color: darkblue;
}

위의 예제처럼, 선택자를 병합하는 방식으로 컴파일되므로, 코드의 부피를 줄일 수 있고 중복된 스타일 없이 깔끔하게 코드를 관리할 수 있습니다.

 

플레이스홀더 선택자 (Placeholder Selector)

@extend는 주로 플레이스홀더 선택자(%)와 함께 사용합니다. 플레이스홀더 선택자는 css로 컴파일되지 않으며 오로지 재사용을 위한 스타일 블럭입니다.

/* SCSS */

//플레이스홀더 선택자
%button-base {
  padding: 10px 20px;
  font-size: 16px;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
}

.button-primary {
  @extend %button-base;
  background-color: blue;
  color: white;
}

.button-secondary {
  @extend %button-base;
  background-color: gray;
  color: black;
}


/* css */

.button-primary, .button-secondary {
  padding: 10px 20px;
  font-size: 16px;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
}

.button-primary {
  background-color: blue;
  color: white;
}

.button-secondary {
  background-color: gray;
  color: black;
}

 

@extend의 한계

앞서 말씀드렸듯이 @extend를 사용하면 선택자가 병합되어 코드의 부피를 줄입니다. 하지만 많은 선택자를 확장하면 복잡해진 병합으로 인해 선택자가 연결되어 버리거나 의도치 않은 css 코드가 생성될 수 있다는 단점이 있습니다. 또한 컴파일된 css에서는 확장시킨 스타일의 추적이 어려우므로 디버깅이 어려워 질 수 있습니다.

 

그렇다면 언제 @extend를 사용할까?

@extend를 사용하기 적합한 상황을 알아봅시다.

• 여러 요소가 공통 스타일을 공유하고, 추가 스타일이 약간씩 다른 경우
• 선택자 병합이 문제가 되지 않는 프로젝트의 경우
• 코드의 간결성과 재사용성을 높이고 싶은 경우