믹스인과의 차이점

동작 방식의 차이

@extend와 믹스인의 근본적인 동작 방식 차이를 이해하는 것이 중요합니다.
@extend는 선택자를 그룹화하고, 믹스인은 스타일을 복사하는데, 이 차이가 최종 CSS 출력과 파일 크기, 성능에 직접적인 영향을 미치기 때문에 먼저 정리해 두는 것이 좋습니다.

@extend: 선택자 그룹화

@extend는 선택자를 그룹화하여 공통 스타일을 공유합니다.
컴파일 시 여러 선택자를 하나의 그룹으로 묶어서 출력합니다.

								.button-base {
								  padding: 8px 16px;
								  border-radius: 4px;
								  font-weight: 700;
								}

								.button-primary {
								  @extend .button-base;
								  background: #0a58ca;
								}

								.button-secondary {
								  @extend .button-base;
								  background: #6c757d;
								}

								.button-base, .button-primary, .button-secondary {
								  padding: 8px 16px;
								  border-radius: 4px;
								  font-weight: 700;
								}

								.button-primary {
								  background: #0a58ca;
								}

								.button-secondary {
								  background: #6c757d;
								}

선택자가 그룹화되어 하나의 규칙으로 출력되므로, CSS 파일 크기가 작아집니다.

믹스인: 스타일 복사

믹스인은 스타일을 복사하여 각 선택자에 삽입합니다.
컴파일 시 각 선택자마다 스타일이 개별적으로 복사됩니다.

								@mixin button-base {
								  padding: 8px 16px;
								  border-radius: 4px;
								  font-weight: 700;
								}

								.button-primary {
								  @include button-base;
								  background: #0a58ca;
								}

								.button-secondary {
								  @include button-base;
								  background: #6c757d;
								}

								.button-primary {
								  padding: 8px 16px;
								  border-radius: 4px;
								  font-weight: 700;
								  background: #0a58ca;
								}

								.button-secondary {
								  padding: 8px 16px;
								  border-radius: 4px;
								  font-weight: 700;
								  background: #6c757d;
								}

각 선택자에 스타일이 개별적으로 복사되므로, CSS 파일 크기가 더 큽니다.

동작 방식 비교 요약

두 방식의 핵심적인 차이를 요약합니다.

구분
@extend
믹스인

동작 방식

선택자를 그룹화하여 공통 스타일 공유

스타일을 복사하여 각 선택자에 삽입
CSS 출력

.a, .b { 공통 스타일 } 형태로 그룹화

각 선택자마다 스타일이 반복됨
파일 크기

일반적으로 더 작음 (그룹화)

더 큼 (반복)

파라미터 사용 가능 여부

파라미터 사용 가능 여부는 가장 큰 차이점 중 하나입니다.
@extend는 파라미터를 받을 수 없어 정적인 스타일만 상속할 수 있지만, 믹스인은 파라미터를 통해 동적으로 값을 변경하며 재사용할 수 있어 실무에서 선택 기준이 됩니다.

@extend: 파라미터 불가

@extend는 파라미터를 사용할 수 없습니다.
정적인 스타일만 상속할 수 있습니다.

								// @extend는 파라미터를 받을 수 없음
								.button-base {
								  padding: 8px 16px;
								  border-radius: 4px;
								}

								.button-primary {
								  @extend .button-base;  // 파라미터 없음, 고정된 스타일만 상속
								}

								// 만약 다른 패딩이 필요하다면?
								.button-large {
								  // @extend .button-base($padding: 12px 24px);  // 불가능!
								  // 새로운 선택자를 만들어야 함
								}

@extend는 동적으로 값을 변경할 수 없어 유연성이 떨어집니다.

믹스인: 파라미터 가능

믹스인은 파라미터를 사용할 수 있어 더 유연합니다.
동적으로 값을 변경할 수 있습니다.

								// 파라미터를 받는 믹스인
								@mixin button($padding: 8px 16px, $bg-color: #0a58ca) {
								  padding: $padding;
								  background: $bg-color;
								  border-radius: 4px;
								}

								.button-primary {
								  @include button;  // 기본값 사용
								}

								.button-large {
								  @include button(12px 24px);  // 패딩만 변경
								}

								.button-custom {
								  @include button(10px 20px, #28a745);  // 둘 다 변경
								}

믹스인은 파라미터를 통해 다양한 값으로 재사용할 수 있어 훨씬 유연합니다.

CSS 출력 결과 상세 비교

같은 스타일을 @extend와 믹스인으로 구현했을 때 CSS 출력 결과를 상세히 비교해봅니다.
실제 컴파일된 CSS 코드를 나란히 비교해 보면, 선택자 그룹화와 스타일 복사 방식의 차이가 파일 크기와 브라우저 성능에 어떤 영향을 주는지 명확하게 확인할 수 있습니다.

여러 선택자에서 사용할 때

여러 선택자에서 같은 스타일을 사용할 때의 차이입니다.

@extend 사용

									.button-base {
									  padding: 8px 16px;
									  border-radius: 4px;
									  font-weight: 700;
									}

									.button-primary {
									  @extend .button-base;
									  background: #0a58ca;
									}

									.button-secondary {
									  @extend .button-base;
									  background: #6c757d;
									}

									.button-success {
									  @extend .button-base;
									  background: #28a745;
									}

									.button-base, .button-primary, .button-secondary, .button-success {
									  padding: 8px 16px;
									  border-radius: 4px;
									  font-weight: 700;
									}

									.button-primary {
									  background: #0a58ca;
									}

									.button-secondary {
									  background: #6c757d;
									}

									.button-success {
									  background: #28a745;
									}

공통 스타일이 하나의 선택자 그룹으로 묶여 출력됩니다.

믹스인 사용

									@mixin button-base {
									  padding: 8px 16px;
									  border-radius: 4px;
									  font-weight: 700;
									}

									.button-primary {
									  @include button-base;
									  background: #0a58ca;
									}

									.button-secondary {
									  @include button-base;
									  background: #6c757d;
									}

									.button-success {
									  @include button-base;
									  background: #28a745;
									}

									.button-primary {
									  padding: 8px 16px;
									  border-radius: 4px;
									  font-weight: 700;
									  background: #0a58ca;
									}

									.button-secondary {
									  padding: 8px 16px;
									  border-radius: 4px;
									  font-weight: 700;
									  background: #6c757d;
									}

									.button-success {
									  padding: 8px 16px;
									  border-radius: 4px;
									  font-weight: 700;
									  background: #28a745;
									}

각 선택자마다 스타일이 개별적으로 반복되어 출력됩니다.

@extend는 선택자를 그룹화하여 CSS가 더 작아지지만, 믹스인은 각 선택자마다 반복됩니다.

파일 크기 비교

같은 스타일을 여러 선택자에서 사용할 때 파일 크기 차이를 비교해봅니다.

방식
CSS 크기 (예시)
설명

@extend

약 150바이트

선택자 그룹화로 중복 제거
믹스인

약 300바이트

각 선택자마다 스타일 반복

선택자가 많을수록 @extend의 파일 크기 이점이 더 커집니다.

성능 비교

@extend와 믹스인의 성능 차이를 알아봅니다.
브라우저가 스타일을 매칭하고 렌더링하는 방식의 차이를 이해하면, 대규모 프로젝트나 성능이 중요한 페이지에서 어떤 방식을 선택할지 판단하는 데 도움이 됩니다.

항목
@extend
믹스인

렌더링 성능

약간 더 빠름

정상
CSS 파일 크기

작음 (선택자 그룹화)

큼 (스타일 반복)
컴파일 시간

느림 (선택자 분석 필요)

빠름 (단순 복사)
선택자 복잡도

높음 (그룹화된 선택자)

낮음 (개별 선택자)
메모리 사용량

낮음 (중복 제거)

높음 (스타일 중복)
유지보수성

낮음 (의존성 복잡)

높음 (독립적 사용)

렌더링 성능: @extend는 선택자를 그룹화하여 브라우저가 스타일을 매칭하는 속도가 약간 더 빠를 수 있습니다.
예를 들어 .button, .link, .card { ... }처럼 그룹화된 선택자는 브라우저가 한 번에 처리할 수 있어 효율적입니다.; 반면 믹스인은 각 선택자마다 스타일이 개별적으로 작성되므로, 선택자가 많을수록 CSS 파일이 커지고 매칭 시간이 늘어날 수 있습니다.

CSS 파일 크기: @extend는 스타일을 한 번만 작성하고 선택자만 그룹화하므로 CSS 파일 크기가 작습니다.
같은 스타일을 여러 선택자에 적용할 때, 믹스인은 스타일을 반복하지만 @extend는 선택자만 추가합니다.

/* @extend 사용 */ .button, .link, .card { padding: 10px; border-radius: 4px; } /* 총 3줄 */ /* 믹스인 사용 */ .button { padding: 10px; border-radius: 4px; } .link { padding: 10px; border-radius: 4px; } .card { padding: 10px; border-radius: 4px; } /* 총 9줄 */

컴파일 시간: @extend는 선택자 간의 관계를 분석하고 그룹화하는 과정이 필요하여 컴파일 시간이 상대적으로 느립니다.
특히 복잡한 선택자 구조나 여러 단계의 @extend가 중첩되면 컴파일 시간이 크게 증가할 수 있습니다.; 믹스인은 단순히 코드를 복사하는 방식이므로 컴파일 시간이 빠르고 예측 가능합니다.

선택자 복잡도: @extend를 많이 사용하면 선택자가 복잡해질 수 있습니다.
예를 들어 .button, .link, .card, .badge, .alert { ... }처럼 긴 선택자 목록이 생성될 수 있어, 가독성이 떨어질 수 있습니다.; 믹스인은 각 선택자가 독립적으로 유지되므로 선택자가 단순하고 명확합니다.

메모리 사용량: @extend는 스타일을 중복하지 않고 선택자만 추가하므로 메모리 사용량이 적습니다.; 같은 스타일을 여러 곳에서 사용할 때, 믹스인은 각각의 스타일 블록을 생성하지만 @extend는 하나의 스타일 블록만 유지합니다.

언제 무엇을 사용할까?

상황에 따라 @extend와 믹스인 중 어떤 것을 사용할지 가이드라인을 제시합니다.
의미적 상속 관계, 파라미터 필요 여부, 미디어 쿼리 사용 등 프로젝트의 구체적인 요구사항에 맞는 선택 기준을 정리해 두면 실무에서 혼란 없이 결정할 수 있습니다.

@extend를 사용하는 경우

다음과 같은 경우에는 @extend를 사용하는 것이 좋습니다:

정적인 스타일: 파라미터가 필요 없는 고정된 스타일
의미적 상속 관계: "A는 B의 한 종류" 같은 상속 관계가 명확한 경우
CSS 파일 크기 최적화: 파일 크기를 줄이고 싶을 때
여러 선택자에서 동일 사용: 많은 선택자에서 정확히 같은 스타일을 사용할 때
성능 최적화: 브라우저 렌더링 성능을 최적화하고 싶을 때

								// 에러 메시지의 기본 스타일 (정적, 파라미터 불필요)
								.error {
								  color: #dc3545;
								  font-weight: 700;
								  padding: 8px;
								}

								// 에러의 한 종류 (의미적 상속 관계)
								.serious-error {
								  @extend .error;  // @extend 사용 적합
								  border: 2px solid #dc3545;
								}

								.critical-error {
								  @extend .error;  // @extend 사용 적합
								  font-size: 18px;
								}

믹스인을 사용하는 경우

다음과 같은 경우에는 믹스인을 사용하는 것이 좋습니다:

파라미터가 필요한 경우: 동적으로 값을 변경해야 할 때
미디어 쿼리 안에서 사용: 미디어 쿼리 내부에서 사용할 때
복잡한 로직: 조건문이나 반복문이 필요한 경우
일반적인 유틸리티: 여러 곳에서 다양한 값으로 사용되는 유틸리티
@content 사용: 동적 콘텐츠 삽입이 필요한 경우

								// 파라미터가 필요한 경우
								@mixin button($bg-color, $padding: 8px 16px) {
								  background: $bg-color;
								  padding: $padding;
								  border-radius: 4px;
								}

								.button-primary {
								  @include button(#0a58ca);  // 믹스인 사용 적합
								}

								.button-large {
								  @include button(#0a58ca, 12px 24px);  // 다양한 값 사용
								}

								// 미디어 쿼리 안에서 사용
								@media (min-width: 768px) {
								  .container {
								    @include button(#0a58ca);  // 믹스인 사용 적합
								  }
								}

실무 권장사항

실무에서 @extend와 믹스인을 어떻게 사용할지 권장사항을 제시합니다.
대부분의 경우 믹스인을 권장하는 이유와, @extend를 사용할 때 주의해야 할 점, 그리고 두 방식을 함께 활용하는 하이브리드 접근법까지 실무에서 바로 적용할 수 있는 가이드를 제공합니다.

일반적인 권장사항

대부분의 경우 믹스인을 사용하는 것을 권장합니다.

유연성: 파라미터를 사용할 수 있어 더 유연함
예측 가능성: CSS 출력 결과를 예측하기 쉬움
디버깅: 문제 발생 시 디버깅이 쉬움
호환성: 미디어 쿼리 등 모든 상황에서 사용 가능
유지보수: 코드 변경 시 영향 범위를 파악하기 쉬움

@extend 사용 시 주의사항

@extend를 사용할 때는 다음 사항을 주의해야 합니다:

의도하지 않은 그룹화: 원하지 않는 선택자까지 그룹화될 수 있음
복잡한 선택자 생성: 여러 번 extend하면 복잡한 선택자 그룹이 생성됨
미디어 쿼리 제한: 미디어 쿼리 안에서 extend 사용 시 제한이 있음
파라미터 불가: 동적으로 값을 변경할 수 없음

하이브리드 접근법

실무에서는 @extend와 믹스인을 함께 사용하는 하이브리드 접근법도 가능합니다.

								// 정적인 기본 스타일은 @extend 사용
								%message-base {
								  padding: 12px;
								  border-radius: 4px;
								}

								.error {
								  @extend %message-base;
								}

								// 동적인 스타일은 믹스인 사용
								@mixin button($bg-color) {
								  background: $bg-color;
								  padding: 8px 16px;
								}

								.button-primary {
								  @include button(#0a58ca);
								}

이렇게 하면 각각의 장점을 활용할 수 있습니다.

정리

@extend와 믹스인의 차이점에 대해 알아본 내용을 정리합니다.
동작 방식, 파라미터, CSS 출력, 성능, 사용 시기 등 핵심 차이점을 한 번에 정리해 두면, 다음 페이지에서 다룰 주의사항과 사용 가이드를 더 깊이 이해할 수 있습니다.

동작 방식: @extend는 선택자 그룹화, 믹스인은 스타일 복사
파라미터: @extend는 불가, 믹스인은 가능
CSS 출력: @extend는 그룹화되어 작음, 믹스인은 반복되어 큼
성능: @extend가 약간 더 빠를 수 있음
사용 시기: @extend는 정적 스타일/의미적 상속, 믹스인은 파라미터 필요/유틸리티
권장사항: 대부분의 경우 믹스인 사용 권장, @extend는 특수한 경우에만

다음 페이지에서는 @extend 사용 시 주의사항을 자세히 알아봅니다.