[css] Sass: @extend

한 class가 다른 calss의 스타일을 가져야 하는 페이지를 설계할 때 종종 있습니다. 예를 들어 BEM 방법론은 블록 또는 요소 클래스와 동일한 요소에 적용되는 modifier class를 권장합니다. 그러나 이렇게 하면 HTML이 어수선해질 수 있으며, 두 클래스를 모두 포함하지 않아 오류가 발생하기 쉬우며, non-semantic style을 markup에 적용할 수 있습니다.

.error, .error--serious {
  border: 1px #f00;
  background-color: #fdd;
}
.error--serious {
  border-width: 3px;
}

Sass의 @extend 규칙이 이러한 문제를 해결합니다. '@extend' selector로 작성하는 이 방법은 Sass에게 한 selector가 다른 selector의 스타일을 상속해야 한다고 알려줍니다.

.error
  border: 1px #f00
  background-color: #fdd

  &--serious
    @extend .error
    border-width: 3px

위 코드에서 @extend는 error selector의 속성을 error-serious가 상속받는다고 말해줍니다.

한 class가 다른 class로 상속되면 Sass는 상속한 claass와 일치하는 모든 요소를 스타일링합니다. 한 class selector가 다른 class를 상속하면 상속 클래스가 이미 있는 HTML의 모든 요소에 상속 클래스를 추가한 것처럼 작동합니다.

Placeholder Selectors

상속을 위해서만 스타일을 작성하려는 경우가 있을 것입니다. 이 경우 placeholder selector를 사용할 수 있습니다. 이 selector는 %로 시작합니다. 이 selector는 CSS 출력에는 포함되지 않지만 상속받은 class의 출력에는 포함됩니다.

.alert:hover, %strong-alert
  font-weight: bold


%strong-alert:hover 
  color: red

이 경우, 상속받은 요소에 한해서만 스타일이 적용됩니다.