SCSS @extend 완벽 정리

 

scss에서 extend를 활용하면 좀 더 코드의 재사용성을 높히고 스타일을 효율적으로 관리할 수 있다는 걸 알게 되면서 개념과 코드예제들을 통해 정리하고 이해해보는 시간을 가져보려고 합니다.

 

1. @extend란?

scss의 @extend는 기존 스타일을 다른 선택자에 상속할 수 있는 기능입니다.

특정 스타일을 여러 요소가 공유 할 수 있도록 해주므로써 이를 통해 중복된 코드를 줄이고 스타일을 보다 효율적으로 활용할 수 있게 됩니다.

 

2.@extend의 특징

1. 코드 재사용성 : 동일한 스타일을 여러 요소에 적용할 때 유용합니다.
2.  css파일 크기 감소
3. 클래스 기반 스타일링 : 기존 클래스를 확장 해서 새로운 스타일을 적용할 수 있습니다.

3.@extend예제

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

.primary-button{
	@extend .button;
    font-weight:bold;
}

 

위 코드가 컴파일 되면 아래와 같이 보여지게 됩니다.

.button, .primary-button {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border-radius: 5px;
}

.primary-button {
  font-weight: bold;
}

 

.primary-button은 .button 스타일을 그대로 상속 받습니다.

.primary-button은 추가적으로 font-weight:bold; 속성을 가집니다.

 

4.@extend의 단점

선택자 구조가 복잡해 질 수 있습니다. @extend를 사용하면 css가 예상치 못한 방식으로 컴파일 될 수 있고 유연성이 부족합니다. 특정 요소에만 스타일을 적용하고 싶다면  @mixin이 더 적절 할 수 도 있습니다.

2024.03.05 - [퍼블리싱/scss] - scss 장/단점과 문법정리 모아보기

scss 장/단점과 문법정리 모아보기

 

5.@extend vs @mixin

좀 더 나아가서 두가지의 차이를 표로 비교해 보자면,

기능	설명	사용 예제
@extend	기존 스타일을 상속	.button{@extend .base-button;}
@mixin	스타일을 정의하고 호출	@include button-style;

 

@mixin 예제를 보면서 @extend와 비교해보니 이해가 빨랐습니다.

@mixin button-style {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border-radius: 5px;
}

.button {
  @include button-style;
}

.primary-button {
  @include button-style;
  font-weight: bold;
}

 

컴파일 되면 이렇게 됩니다.

.button {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border-radius: 5px;
}

.primary-button {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border-radius: 5px;
  font-weight: bold;
}

 

즉 결과적으로 

@extend는 선택자를 공유하여 css를 최적화 하고,

@mixin은 스타일을 복사하여 개별적으로 적용합니다.

@mixin은 매개변수 사용가능하고 @extend는 불가능합니다.

 

6. @extend 사용시 주의점

// ❌ 잘못된 사용법
.button {
  padding: 10px;
}

a {
  @extend .button; // 오류 발생
}

@extend는 태그 선택자에는 적용되지 않고 클래스 선택자에만 사용해야합니다.

 

또한 너무 많은 @extend는 사용을 피해야 합니다.

.base {
  color: red;
}

.button {
  @extend .base;
}

.primary-button {
  @extend .button;
}

이 처럼 여러번 사용하게 되면 css가 복잡해지고 유지보수가 어려워 집니다.

 

결론적으로는,

공통 스타일을 여러 요소에 적용할 때, css 파일 크기를 줄이거나 클래스 기반 스타일링을 해야 할 때 @extend를,

 

유연한 스타일과 매개변수 사용, 태그 선택자에도 사용하고 싶을 땐 @mixin을 사용합니다.