[SCSS] SCSS 상속(Extend)

SCSS 상속은 스타일 규칙을 다른 스타일 규칙에 적용하는 기능을 제공합니다. 이를 통해 중복되는 스타일 코드를 줄이고 코드의 재사용성을 높일 수 있습니다.

---

기본 개념

SCSS의 상속은 @extend 지시자를 사용하여 수행됩니다. 기존에 정의한 스타일을 다른 스타일에 상속하고자 할 때 @extend를 사용하며, 선택자를 통해 어떤 스타일을 상속할지 지정합니다.

// 기존 스타일 정의
.button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
}

// .button 스타일을 상속하는 .primary-button 정의
.primary-button {
  @extend .button;
  border: 2px solid #007bff;
}

위의 예제에서는 .button 스타일을 .primary-button 스타일에 상속하였습니다. 결과적으로 .primary-button은 .button의 스타일을 모두 상속하며, 추가적인 스타일을 정의할 수 있습니다.

---

활용 예제

SCSS 상속은 스타일의 일관성을 유지하고 코드의 양을 줄이는 데에 유용합니다. 예를 들어, 버튼 스타일을 여러 버튼 요소에 적용하고자 할 때 유용하게 활용할 수 있습니다.

// 기본 버튼 스타일
.button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

// 다양한 버튼 정의
.primary-button {
  @extend .button;
  background-color: #007bff;
  color: #fff;
}

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

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

// ...

위의 예제에서는 기본 버튼 스타일인 .button을 다양한 유형의 버튼에 상속하여 스타일을 적용하였습니다. 이렇게 함으로써 버튼들 사이의 일관성을 유지하면서 중복된 코드를 줄일 수 있습니다.

 

SCSS 상속을 활용하면 스타일 코드를 보다 효율적으로 관리하고 유지보수를 용이하게 할 수 있습니다. 이를 통해 중복된 코드를 줄이고 일관성 있는 디자인을 구현할 수 있습니다.