SASS에서 선택자 상속

스타일 작업 시 상속 관련 문제가 발생할 수 있습니다. 그러나 @extend 지시어를 사용하면 어떤 선택자가 다른 선택자의 스타일을 상속해야 하는지 명확하게 지정할 수 있기 때문에 이러한 문제를 쉽게 피할 수 있습니다. 예를 들어 살펴보겠습니다:

예를 들어 살펴보겠습니다:

style.scss.warning {
  border: 1px solid;
  background-color: #ffd900;
}

.personalWarning {
  @extend .warning;
  border-width: 3px;
}

이제 컴파일 결과를 살펴보겠습니다:

style.css.warning, .personalWarning {
  border: 1px solid;
  background-color: #ffd900; }

.personalWarning {
  border-width: 3px; 
}

styles.scss#product-card {
  color: #302f2f;
  font-family: 'Times New Roman', Times, serif;
}

#product-card-title {
  @extend #product-card;
  font-weight: 600px;
}