[Sass] 5장 상속(Inheritance) 사용법

✅ 1. 상속(Inheritance)란 

Sass에서 상속은 공통 스타일을 여러 서택자에 재사용하고 싶을 때 유용하며, CSS에서 클래스 반복을 줄이고 유지보수를 쉽게 해주는 기능입니다. Sass에서 @extend를 사용해 다른 셀렉터의 스타일을 상속할 수 있으며 즉, 하나의 클래스를 기준 스타일로 만들고, 다른 클래스가 이를 그대로 가져오는 구조입니다.

// style.scss

.button {
  padding: 10px 20px;
  background-color: cornflowerblue;
  color: #fff;
  border-radius: 5px;
}

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

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

// style.css
.button, .secondary-button, .primary-button {
  padding: 10px 20px;
  background-color: cornflowerblue;
  color: #fff;
  border-radius: 5px;
}

.primary-button {
  background-color: green;
}

.secondary-button {
  background-color: gray;
}

/*# sourceMappingURL=style.css.map */

• .primary-button과 .secondary-button이 .button의 상속 받아 padding, color, border-radius를 그대로 사용
• background-color는 각 클래스에서 덮어쓰기 가능

---

✅ 2. 상속 대상에 placeholder 사용

Sass에서는 %로 시작하는 placeholder selector를 사용해 실제 CSS에 출력되지 않고 오직 상속용으로만 정의가 가능합니다.

// placeholder.scss
%button-base {
  padding: 10px 20px;
  color: #fff;
  border-radius: 5px;
}

.primary-button {
  @extend %button-base;
  background-color: green;
}

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

// placeholder.css
.secondary-button, .primary-button {
  padding: 10px 20px;
  color: #fff;
  border-radius: 5px;
}

.primary-button {
  background-color: green;
}

.secondary-button {
  background-color: gray;
}

/*# sourceMappingURL=style.css.map */

• %button-base는 CSS에 직접 나타나지 않고, 상속하는 클래스에서만 적용
• 이렇게 하면 불필요한 .button 클래스가 남지 않음

---

✅ 3. 중접(Nesting)과 상속

Sass의 상속은 중첩된 선택자에도 적용됩니다.

// nesting.scss
.card-primary,
.card-secondary {
  border: 1px solid #ccc;
  padding: 20px;
  background-repeat: 10px;
}

.card-primary {
  background-color: #f0f8ff;
}

.card-primary h2 {
  color: blue;
}

.card-secondary {
  background-color: #f5f5f5;
}

.card-secondary h2 {
  color: aliceblue;
}

// nesting.css
.card-primary,
.card-secondary {
  border: 1px solid #ccc;
  padding: 20px;
  background-repeat: 10px;
}

.card-primary {
  background-color: #f0f8ff;
}

.card-primary h2 {
  color: blue;
}

.card-secondary {
  background-color: #000;
}

.card-secondary h2 {
  color: green;
}

/*# sourceMappingURL=nesting.css.map */

• 부모 .card-primary와 .card-secondary가 %card 스타일을 공유
• 내부 h2는 각 클래스에서 별도로 스타일 적용 가능

---

✅ 4. 주의 사항

• 무분별한 상속 금지: 상속을 너무 많이 사용하면 CSS 선택자가 길어질 수 있음
• Placeholder 권장: 상속용 클래스를 실제 CSS에 남기고 싶지 않다면 % 사용
• Mixin과 비교: @mixin은 함수처럼 값을 전달 가능하고, CSS를 재사용하지만 매번 새롭게 코드를 생성 
  
  • @extend는 코드 중복을 줄여 선택자를 합쳐서 출력
  • 유지보수 측면에서는 큰 프로젝트에서 placeholder + extend 추천 

---

 

GitHub - Koras02/sass-bloging: https://thinky.tistory.com/category/Front-End/SASS