[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
이 경우, 상속받은 요소에 한해서만 스타일이 적용됩니다.
Author And Source
이 문제에 관하여([css] Sass: @extend), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lemuel0525/Sass-extend저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)