@extend의 개념 - by. UXKM

Publishing
SCSS
상속과 확장 (@extend)
@extend의 개념

요약 설명
@extend는 SCSS에서 한 선택자의 스타일을 다른 선택자에 상속시킬 수 있는 기능입니다.
믹스인이 스타일을 복사하는 것과 달리, @extend는 선택자를 그룹화하여 공통 스타일을 공유합니다.

이 페이지에서는 @extend의 기본 개념, 동작 원리, 선택자 그룹화 메커니즘, 컴파일 과정, 그리고 실제 사용 예시를 상세히 알아봅니다.

@extend란?

@extend는 SCSS에서 한 선택자의 스타일을 다른 선택자에 상속시킬 수 있는 기능입니다.
상속받은 선택자는 원본 선택자와 같은 그룹으로 묶여서 CSS에 출력되며, 이렇게 하면 CSS 파일 크기를 줄이고 의미적 상속 관계를 코드로 명확하게 표현할 수 있습니다.

기본 개념

@extend는 "A는 B의 한 종류" 같은 상속 관계를 표현할 때 사용합니다.
예를 들어, "에러 메시지는 메시지의 한 종류"라는 관계를 @extend로 표현할 수 있습니다.

								// 기본 메시지 스타일
								.message {
								  padding: 12px;
								  border-radius: 4px;
								  font-weight: 500;
								}

								// 에러 메시지는 메시지의 한 종류
								.error {
								  @extend .message;
								  color: #dc3545;
								  background: #f8d7da;
								}

								// 성공 메시지도 메시지의 한 종류
								.success {
								  @extend .message;
								  color: #28a745;
								  background: #d4edda;
								}

이렇게 작성하면 의미적 상속 관계를 코드로 명확하게 표현할 수 있습니다.

기본 문법

@extend 뒤에 상속받을 선택자 이름을 씁니다.

								// 기본 스타일 정의
								.button-base {
								  padding: 8px 16px;
								  border-radius: 4px;
								  font-weight: 700;
								}

								// @extend로 상속
								.button-primary {
								  @extend .button-base;
								  background: #0a58ca;
								}

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

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

@extend를 사용하면 선택자가 그룹화되어 공통 스타일을 공유합니다.

@extend의 동작 원리

@extend가 어떻게 동작하는지 내부 메커니즘을 상세히 알아봅니다.
선택자 그룹화 과정과 컴파일 결과를 이해하면, @extend를 사용할 때 최종 CSS가 어떻게 생성되는지 예측할 수 있어 디버깅과 최적화에 도움이 됩니다.

선택자 그룹화 메커니즘

@extend는 선택자를 그룹화하여 CSS를 최적화합니다.
여러 선택자가 같은 스타일을 공유할 때, 하나의 선택자 그룹으로 묶어서 출력합니다.

								// 기본 에러 스타일
								.error {
								  color: #dc3545;
								  font-weight: 700;
								  padding: 8px;
								}

								// 심각한 에러
								.serious-error {
								  @extend .error;
								  border: 2px solid #dc3545;
								}

								// 위험한 에러
								.critical-error {
								  @extend .error;
								  font-size: 18px;
								}

								// 치명적인 에러
								.fatal-error {
								  @extend .serious-error;
								  background: #dc3545;
								}

								.error, .serious-error, .critical-error, .fatal-error {
								  color: #dc3545;
								  font-weight: 700;
								  padding: 8px;
								}

								.serious-error, .fatal-error {
								  border: 2px solid #dc3545;
								}

								.critical-error {
								  font-size: 18px;
								}

								.fatal-error {
								  background: #dc3545;
								}

이렇게 하면 CSS 파일 크기가 줄어들고, 브라우저가 스타일을 더 효율적으로 처리할 수 있습니다.
같은 스타일을 여러 선택자에 반복해서 쓰는 대신, 하나의 선택자 그룹으로 묶어서 출력하기 때문입니다.

컴파일 과정 이해

@extend가 컴파일 과정에서 어떻게 처리되는지 단계별로 알아봅니다.

1단계: 상속 관계 파악

SCSS 컴파일러는 먼저 어떤 선택자가 어떤 선택자를 상속하는지 파악합니다.

									.error {
									  color: #dc3545;
									}

									.serious-error {
									  @extend .error;  // .serious-error는 .error를 상속
									}

2단계: 선택자 그룹 생성

컴파일러는 상속 관계를 기반으로 선택자 그룹을 생성합니다.

									// .error와 .serious-error를 하나의 그룹으로 묶음
									.error, .serious-error {
									  color: #dc3545;
									}

3단계: 개별 스타일 추가

각 선택자의 개별 스타일을 추가합니다.

									.serious-error {
									  border: 2px solid #dc3545;  // 개별 스타일
									}

@extend의 특징

@extend의 주요 특징들을 정리합니다.
선택자 그룹화, 의미적 상속 관계 표현, CSS 최적화 등 @extend만의 고유한 특성을 이해하면, 믹스인과의 차이를 명확히 구분하고 상황에 맞는 선택을 할 수 있습니다.

선택자 그룹화

@extend의 가장 큰 특징은 선택자를 그룹화한다는 것입니다.

								.button {
								  padding: 8px 16px;
								}

								.button-primary {
								  @extend .button;
								}

								.button-secondary {
								  @extend .button;
								}

								.button, .button-primary, .button-secondary {
								  padding: 8px 16px;
								}
								// 세 선택자가 하나의 그룹으로 묶임

이렇게 하면 CSS 파일 크기가 줄어들고, 브라우저가 스타일을 더 효율적으로 처리할 수 있습니다.

의미적 상속 관계 표현

@extend는 의미적 상속 관계를 코드로 표현할 수 있습니다.

								// 동물의 기본 특성
								.animal {
								  breathing: true;
								  moving: true;
								}

								// 개는 동물의 한 종류
								.dog {
								  @extend .animal;
								  barking: true;
								}

								// 고양이도 동물의 한 종류
								.cat {
								  @extend .animal;
								  meowing: true;
								}

이렇게 작성하면 "개는 동물이다", "고양이는 동물이다"라는 의미적 관계를 코드로 명확하게 표현할 수 있습니다.

CSS 최적화

@extend는 CSS 파일 크기를 줄이고 성능을 향상시킵니다.

방식
CSS 크기
설명

@extend 사용

작음

선택자를 그룹화하여 중복 제거
믹스인 사용

큼

각 선택자마다 스타일 반복

@extend를 사용하면 같은 스타일을 여러 선택자에 반복하지 않고, 하나의 선택자 그룹으로 묶어서 출력하므로 CSS 파일이 더 작아집니다.

실제 사용 예시

@extend를 실제 프로젝트에서 활용하는 예시를 살펴봅니다.
에러 메시지 시스템, 버튼 시스템처럼 여러 변형이 있지만 공통 기반을 공유하는 컴포넌트에서 @extend가 어떻게 코드 구조를 단순화하는지 확인할 수 있습니다.

에러 메시지 시스템

여러 종류의 에러 메시지를 @extend로 체계적으로 관리하는 예시입니다.

								// 기본 메시지 스타일
								.message {
								  padding: 12px 16px;
								  border-radius: 4px;
								  font-weight: 500;
								  margin-bottom: 16px;
								}

								// 에러 메시지 (메시지의 한 종류)
								.error {
								  @extend .message;
								  color: #dc3545;
								  background: #f8d7da;
								  border: 1px solid #f5c6cb;
								}

								// 경고 메시지 (메시지의 한 종류)
								.warning {
								  @extend .message;
								  color: #856404;
								  background: #fff3cd;
								  border: 1px solid #ffeaa7;
								}

								// 성공 메시지 (메시지의 한 종류)
								.success {
								  @extend .message;
								  color: #155724;
								  background: #d4edda;
								  border: 1px solid #c3e6cb;
								}

								.message, .error, .warning, .success {
								  padding: 12px 16px;
								  border-radius: 4px;
								  font-weight: 500;
								  margin-bottom: 16px;
								}

								.error {
								  color: #dc3545;
								  background: #f8d7da;
								  border: 1px solid #f5c6cb;
								}

								.warning {
								  color: #856404;
								  background: #fff3cd;
								  border: 1px solid #ffeaa7;
								}

								.success {
								  color: #155724;
								  background: #d4edda;
								  border: 1px solid #c3e6cb;
								}

이렇게 작성하면 모든 메시지가 공통 스타일을 공유하면서도, 각각의 고유한 스타일을 가질 수 있습니다.

버튼 시스템

여러 종류의 버튼을 @extend로 체계적으로 관리하는 예시입니다.

								// 기본 버튼 스타일
								.button {
								  padding: 8px 16px;
								  border-radius: 4px;
								  font-weight: 700;
								  cursor: pointer;
								  border: none;
								  transition: background 0.3s;
								}

								// Primary 버튼 (버튼의 한 종류)
								.button-primary {
								  @extend .button;
								  background: #0a58ca;
								  color: #ffffff;

								  &:hover {
								    background: #084298;
								  }
								}

								// Secondary 버튼 (버튼의 한 종류)
								.button-secondary {
								  @extend .button;
								  background: #6c757d;
								  color: #ffffff;

								  &:hover {
								    background: #545b62;
								  }
								}

이렇게 작성하면 모든 버튼이 공통 스타일을 공유하면서도, 각각의 고유한 색상과 호버 효과를 가질 수 있습니다.

@extend의 장단점

@extend를 사용할 때의 장점과 단점을 정리합니다.
CSS 파일 크기 감소와 성능 향상 같은 장점과 파라미터 사용 불가, 미디어 쿼리 제한 같은 단점을 비교해 보면, 프로젝트에서 @extend를 언제 도입할지 판단하는 기준이 됩니다.

장점: CSS 파일 크기 감소: 선택자를 그룹화하여 중복을 줄임; 성능 향상: 브라우저가 스타일을 더 효율적으로 처리; 의미적 관계 표현: 상속 관계를 코드로 명확하게 표현; 유지보수성 향상: 공통 스타일을 한 곳에서 관리

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

정리

@extend의 개념에 대해 알아본 내용을 정리합니다.
선택자 그룹화를 통한 CSS 최적화와 의미적 상속 관계 표현이라는 @extend의 핵심 가치를 다시 한 번 정리해 두면, 다음 단계인 믹스인과의 비교를 더 명확하게 이해할 수 있습니다.

@extend의 개념: 한 선택자의 스타일을 다른 선택자에 상속시키는 기능
동작 원리: 선택자를 그룹화하여 공통 스타일을 공유
주요 특징: 선택자 그룹화, 의미적 상속 관계 표현, CSS 최적화
활용 예시: 에러 메시지 시스템, 버튼 시스템 등에서 활용
장단점: CSS 파일 크기 감소, 성능 향상 등의 장점과 파라미터 사용 불가 등의 단점

다음 페이지에서는 믹스인과의 차이점을 더 자세히 비교해봅니다.