CSS의 전처리기 언어인 SCSS를 사용하는 방법 중 다른 스타일을 가져오는 방법에 대하여 알아봅니다. 바로 @extend를 사용한 스타일 확장 방법입니다.



# SCSS의 스타일 확장 알아보기, @extend

전처리기 덕분에 CSS 역시 자바스크립트의 객체처럼 다른 스타일을 상속 받는 것처럼 사용하는 것이 가능합니다. 상속과는 다를 수 있으나 스타일을 확장하여 사용할 수 있어 모든 스타일을 정의하지 않아도 다른 스타일을 가져와 사용할 수 있죠. SCSS의 @extend가 바로 그것입니다.

@extend <가져올 스타일>


문법은 위와 같이 간단하며 가져올 스타일을 명시하면 됩니다.

이 방법은 매우 유용합니다. 특히 컴포넌트 등의 인터페이스를 사용할 때도 간단히 확장해 사용할 수 있고 아니면 아이콘 등의 비슷한 그룹끼리 적용하여 사용할 수 있게죠. 

그럼 아래는 @extend를 사용한 예제와 방법입니다.


! scss @extend 사용하는 방법 및 예제보기
특히 버튼을 생각하면 동일한 스타일이 많이 사용되므로 @extend를 적용하기 아주 좋은 예 중 하나입니다. 버튼의 스타일을 적용하고 각각 스타일을 적용하는 예제를 만들어볼까 합니다.
.btn {
  display: inline-block;
  vertical-align: middle;
  min-width: 60px;
  height: 30px;
  background: gray;
  color: #000;
}

일단 기본적인 버튼의 스타일을 적용했습니다. 이제 모든 버튼을 위의 스타일을 가지되 여러가지 색을 가지도록 정의해보겠습니다.
// 흰색 버튼
.btn-white {
  @extend .btn;
  backgroud-color: white;
}

// 빨간 버튼
.btn-red {
  @extend .btn;
  backgroud-color: red;
}

간단하게 흰색과 빨간색 버튼을 만들어 보았습니다. 매우 간단합니다. 이번에는 비활성화 버튼을 만들어볼까요?
// 비활성화 버튼
.btn-disabled {
  @extend .btn;
  cursor:  not-allowed;
  pointer-events: none;
  opacity: .7;
}

이번에도 역시 동일하게 @extend를 사용하여 클릭이 안되고 약간의 투명도를 주어 비활성화 버튼을 구현하였습니다.

아래처럼 전처리기를 활용해 사용할 수도 있겠죠.
.btn {
  display: inline-block;
  vertical-align: middle;
  min-width: 60px;
  height: 30px;
  background: gray;
  color: #000;

  &-white {
    @extend .btn;
    backgroud-color: white;
  }
  &-red {
    @extend .btn;
    backgroud-color: red;
  }
  &-disabled {
    @extend .btn;
    cursor: not-allowed;
    pointer-events: none;
    opacity: .7;
  }
}

여기까지 scss의 @extend를 사용한 스타일 확장 방법에 대하여 알아보았습니다.

참고로 비슷한 방법으로 @include, @mixin을 사용할 수 있습니다. 스타일을 미리 정의하고 필요할 때 가져올 것인지... 아니면 미리 적용한 스타일을 확장해 사용할 것인지의 차이점이 있겠죠.

scss @include, @mixin 더 알아보기 >
https://webisfree.com/2019-10-08/[scss]-mixin-include-사용방법-및-예제보기