[ SASS/SCSS 입문 ] Sass 확장/상속

 

 

 

SCSS의 상속 기능과 CSS의 class 상속과의 차이점

---

 

CSS에서 클래스 간의 스타일 상속은 주로 클래스를 여러 요소에 적용하여 구현됩니다.

예를 들어, .button 클래스의 스타일을 여러 버튼에 적용하고자 할 때,

해당 클래스를 HTML 요소의 class 속성에 추가함으로써 이루어집니다.

 

반면, SCSS의 상속 기능은 @extend 지시어를 사용하여,

한 선택자의 스타일을 다른 선택자에게 적용할 수 있습니다.

이는 CSS에서는 볼 수 없는, SCSS만의 강력한 기능입니다.

 

 

SCSS에서 @extend를 사용하면, 원본 스타일을 유지하면서

필요한 부분만 변경하여 새로운 스타일을 생성할 수 있습니다.

이는 코드의 재사용성을 높이고, 유지보수를 용이하게 합니다.

또한, 컴파일된 CSS는 최적화되어, 중복되는 스타일이 줄어들게 됩니다.

 

 

 

@extend 사용법과 예제

SCSS에서 @extend를 사용하는 방법은 매우 간단합니다. 

상속받고자 하는 선택자의 스타일을 정의한 후, 상속받을 선택자에서 

@extend 지시어를 사용하여 해당 스타일을 확장하면 됩니다.

 

.button {
  padding: 10px 15px;
  border: none;
  background-color: blue;
  color: white;
}

.success-button {
  @extend .button;
  background-color: green;
}

 

위 예제에서 .success-button은 .button의 스타일을 상속받되, 

background-color 속성만 다르게 정의하였습니다. 

결과적으로 .success-button은 .button의 모든 스타일을 가지면서, 

초록색 배경색을 가진 버튼 스타일이 됩니다.

 

 

 

상속을 사용하여 코드 중복을 줄이는 방법

---

 

SCSS의 상속 기능을 사용하면, 

공통적인 스타일을 가진 요소들에 대해 중복된 코드를 줄일 수 있습니다. 

예를 들어, 여러 종류의 버튼(기본, 성공, 경고 등)이 비슷한 스타일을 가지되, 

색상만 다르게 설정해야 할 때, @extend를 사용하면 

각 버튼의 고유 스타일만 정의하면서 공통 스타일은 재사용할 수 있습니다.

 

이 방법은 코드의 가독성을 높이고, 스타일 시트의 크기를 줄이는 데 효과적입니다.

또한, 스타일의 변경이 필요할 때 원본 스타일만 수정하면 되므로 유지보수가 용이해집니다.

 

 

 

상속의 한계와 주의해야 할 점

---

 

SCSS의 상속 기능은 매우 유용하지만, 

과도하게 사용할 경우 예상치 못한 부작용이 발생할 수 있습니다. 

예를 들어, 너무 많은 선택자가 한 선택자를 상속받게 되면, 

컴파일된 CSS 파일에서 선택자의 목록이 길어져 파일 크기가 커지고, 

웹사이트의 로딩 시간에 영향을 줄 수 있습니다.

 

또한, 복잡한 상속 구조는 코드의 가독성을 떨어뜨리고,

유지보수를 어렵게 만들 수 있습니다.

따라서, @extend는 필요한 경우에만 신중하게 사용하고,

상속 구조를 가능한 단순하게 유지하는 것이 중요합니다.

 

 

 

실제 사례를 통한 효율적인 상속 전략

---

 

실제 프로젝트에서 SCSS의 @extend 기능을 효율적으로 사용하기 위한 전략을 몇 가지 제시하고자 합니다.

 

공통 요소의 추상화

프로젝트에 공통적으로 사용되는 스타일 요소(예: 버튼, 폼 요소 등)는 추상화하여 베이스 클래스를 만듭니다. 

이후, 변형이 필요한 요소에 대해서만 추가 스타일을 적용합니다. 

이렇게 하면, 기본 스타일의 변경이 필요할 때 베이스 클래스만 수정하면 되므로, 유지보수가 용이해집니다.

 

// 베이스 클래스
.base-button {
  padding: 10px 15px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  &:hover {
    opacity: 0.8;
  }
}

// 변형 스타일
.primary-button {
  @extend .base-button;
  background-color: blue;
  color: white;
}

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

 

 

상속과 함께 사용하는 조건부 스타일링

특정 조건에 따라 스타일을 다르게 적용해야 할 경우, 

@extend와 함께 조건문을 사용하여 유연하게 스타일을 관리할 수 있습니다. 

이 방법은 프로젝트의 다양성을 유지하면서도 코드의 중복을 최소화합니다.

 

@mixin button-variant($color) {
  @extend .base-button;
  background-color: $color;
  color: contrast($color);
}

.success-button {
  @include button-variant(green);
}

.warning-button {
  @include button-variant(yellow);
}

 

 

상속의 한계 인식

모든 스타일링 상황에 @extend가 최선의 선택은 아닙니다. 

특히, 상속받는 선택자의 스타일이 예상치 못한 방식으로 변경될 위험이 있거나, 

상속으로 인해 생성되는 CSS 선택자의 복잡도가 증가하는 경우는 주의가 필요합니다. 

이런 경우, @mixin이나 컴포넌트 기반 설계를 고려하는 것이 더 나은 접근일 수 있습니다.

 

 

SCSS의 @extend 기능은 스타일 시트의 재사용성과 유지보수성을 

크게 향상시킬 수 있는 강력한 도구입니다. 

그러나 이를 적절하게 사용하기 위해서는 상속의 한계와 주의해야 할 점을 이해하고, 

실제 프로젝트의 요구 사항에 맞게 적절한 전략을 선택하는 것이 중요합니다. 

상속을 통한 코드의 중복 감소와 효율적인 스타일 관리는 

개발자가 더 나은 사용자 경험을 제공할 수 있게 도와줍니다.