한 클래스가 다른 클래스의 모든 스타일과 고유한 스타일을 가져야 하는 페이지를 디자인할 때가 종종 있습니다. 예를 들어, BEM 방법론은 블록 또는 요소 클래스와 동일한 요소에 적용되는 수식자 클래스를 권장합니다. 그러나 이것은 혼란스러운 HTML을 만들 수 있고, 두 클래스를 모두 포함하는 것을 잊어버리는 오류가 발생하기 쉬우며, 당신의 마크업에 의미 없는(non-semantic) 스타일 문제를 가져올 수 있습니다.
Sass의 @extend 규칙은 이것을 해결합니다. 그것은 @extend <selector>라고 쓰이고, Sass에게 한 선택자가 다른 선택자의 스타일을 상속받아야 한다고 말합니다.
한 클래스가 다른 클래스를 확장할 때 Sass는 확장되는 클래스와 일치하는 것처럼 확장자와 일치하는 모든 요소를 스타일링합니다. 하나의 클래스 선택자가 다른 클래스를 확장하면 이미 확장하는 클래스를 가진 HTML의 모든 요소에 확장된 클래스를 추가한 것과 동일하게 작동합니다. 단지 class="error--serious"라고 쓰면 Sass가 class="error"가 있는 것처럼 스타일을 지정합니다.
물론, 스타일 규칙에서 선택자가 스스로 사용되는 것은 아닙니다. Sass는 선택자가 사용되는 모든 곳으로 확장하는 것을 알고 있습니다. 이렇게 하면 요소가 확장된 선택자와 일치하는 것처럼 정확하게 스타일링됩니다.
⚠️주의!
확장은 스타일시트의 나머지 부분이 컴파일된 후에 해결됩니다. 특히 상위 선택자가 해결된 후에 발생합니다. 즉,@extend .error를 사용하는 경우.error { &__icon { ... } }의 내부 선택자에 영향을 주지 않습니다. 또한 SassScript의 부모 선택자에서 확장 결과를 볼 수 없습니다.
작동 방법
스타일을 현재 스타일 규칙에 복사하는 mixin과 달리 @extend는 확장된 선택자를 포함하는 스타일 규칙을 업데이트하여 확장하는 선택자도 포함합니다. 선택자를 확장할 때 Sass는 지능형 통합을 수행합니다.
-
어떤 요소와도 일치할 수 없는
#main#footer와 같은 선택자를 생성하지 않습니다. -
HTML 요소가 중첩된 순서에 관계없이 작동할 수 있도록 복잡한 선택자가 끼워넣어집니다.
-
이 기능은 불필요한 선택자를 가능한 한 많이 자르는 동시에 특수성이 확장자의 것보다 크거나 동일하도록 합니다.
-
한 선택자가 다른 선택자와 일치하는 경우를 알고 이를 결합할 수 있습니다.
-
결합자, 전체 선택자 및 선택자가 포함된 가상 클래스를 지능적으로 처리합니다.
💡재미있는 사실:
선택자 함수를 사용하여 Sass의 지능형 통합에 직접 액세스할 수 있습니다!selector.unify()함수는 두 선택자의 교차점과 일치하는 선택자를 반환하는 반면selector.extend()함수는@extend와 동일하게 작동하지만 단일 선택자에서 작동합니다.
⚠️주의!
@extend는 확장된 선택자를 포함하는 스타일 규칙을 업데이트하므로, 해당 스타일은@extend가 나타나는 위치가 아니라 확장된 선택자의 스타일 규칙이 나타나는 위치에 따라 [종속]에서(https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade) 우선순위를 가집니다. 이것은 혼란스러울 수 있지만, 이것은 HTML에 확장 클래스를 추가할 때 규칙이 가질 수 있는 우선 순위와 동일하다는 것을 기억하십시오.
플레이스홀더 선택자
확장만 의도한 스타일 규칙을 작성하고 싶을 때도 있습니다. 이런 경우 플레이스홀더 선택자를 사용할 수 있습니다. 이 선택자는 . 대신 %로 시작하는 클래스 선택자처럼 보입니다. 플레이스홀더를 포함하는 선택자는 CSS 출력물에 포함되지 않지만, 이를 확장하는 선택자는 포함됩니다.
프라이빗 플레이스홀더
모듈 구성원과 마찬가지로 플레이스홀더 선택자는 - 또는 _로 시작하는 이름으로 프라이빗으로 표시할 수 있습니다. 프라이빗 플레이스홀더 선택자를 정의하는 스타일시트 내에서만 확장될 수 있습니다. 다른 스타일시트에서는 해당 선택자가 존재하지 않는 것처럼 보입니다.
확장 범위
하나의 스타일시트가 선택자를 확장하면 해당 확장은 상류 모듈에 작성된 스타일 규칙, 즉 @use 규칙 또는 @forward 규칙을 사용하여 해당 스타일시트에 의해 로드된 모듈, 해당 모듈에 의해 로드된 모듈 등에만 영향을 미칩니다. 이렇게 하면 @extend 규칙을 보다 예측 가능하게 만들어 사용자가 규칙을 작성할 때 알고 있던 스타일에만 영향을 줍니다.
⚠️주의!
@import규칙을 사용하는 경우 확장의 범위가 전혀 지정되지 않습니다. 가져오는 모든 스타일시트뿐만 아니라 스타일시트를 가져오는 모든 스타일시트, 해당 스타일시트를 가져오는 다른 모든 스타일시트 등에도 영향을 미칩니다.@use를 사용하지 않으면 확장이 글로벌해집니다.
필수 및 선택적 확장
일반적으로 @extend가 스타일시트의 선택자와 일치하지 않으면 Sass에서 오류가 발생합니다. 이렇게 하면 상속되는 선택자의 이름을 바꾸지 않고 오타나 선택자의 이름 변경을 방지할 수 있습니다. 확장 선택자가 있어야 하는 확장은 필수입니다.
하지만 이것이 항상 여러분이 원하는 것은 아닐 수도 있습니다. 확장된 선택자가 존재하지 않는 경우 @extend에서 아무 작업도 수행하지 않으려면 끝에 !optional을 추가하세요.
확장 아니면 믹스인?
확장과 믹스인은 모두 Sass에서 스타일을 캡슐화하고 재사용하는 방식으로, 자연스럽게 어떤 스타일을 언제 사용할지에 대한 문제가 제기됩니다. 인수를 사용하여 스타일을 구성해야 할 때 믹스인은 분명히 필요하지만, 만약 그것들이 단지 스타일 덩어리라면 어떨까요?
경험으로 보아 의미적 클래스(또는 다른 의미적 선택자) 간의 관계를 표현할 때 확장이 가장 좋은 옵션입니다. 클래스 .error--serious를 가진 요소는 오류이므로 .error를 확장하는 것이 타당합니다. 그러나 의미론적이지 않은 스타일 컬렉션의 경우 믹스인을 작성하면 캐스캐이드 두통을 피할 수 있고 구성을 더 쉽게 할 수 있습니다.
💡재미있는 사실:
대부분의 웹 서버는 동일한 텍스트의 반복적인 덩어리를 매우 잘 처리하는 알고리즘을 사용하여 서비스하는 CSS를 압축합니다. 이것은 믹스인이 확장보다 더 많은 CSS를 생성할 수 있지만, 사용자가 다운로드해야 하는 양을 크게 증가시키지는 않을 것이라는 것을 의미합다. 따라서 최소한의 CSS를 생성하는 기능이 아니라 사용 사례에 가장 적합한 기능을 선택하십시오!
제한
허락되지 않는 선택자
단순한 선택자(예: .info 또는 a)만 확장할 수 있습니다. .message.info를 확장할 수 있는 경우 @extend의 정의에 따르면 확장자와 일치하는 요소는 .message.info과 일치하는 것처럼 스타일이 지정됩니다. 이는 .message와 .info를 모두 일치시키는 것과 동일하므로 @extend .message, .info 대신에 그것을 작성하는 데 아무런 이점이 없습니다.
마찬가지로 .main .info를 확장할 수 있다면, 자체적으로 .info를 확장하는 것과 거의 동일한 작업을 수행할 것입니다. 미묘한 차이는 실질적으로 다른 일을 하는 것처럼 보이는 혼란을 줄 가치가 없기 때문에 이것도 허용되지 않습니다.
HTML 휴리스틱
@extend가 복잡한 선택자를 끼워넣을때, 를 사용하는 경우 조상 선택자의 가능한 모든 조합을 생성하지는 않습니다. 생성할 수 있는 선택자의 대부분은 실제 HTML과 실제로 일치하지 않으며, 모두 생성하면 스타일시트가 너무 커서 실제 가치가 거의 없습니다. 대신 휴리스틱을 사용합니다. 각 선택자의 조상이 다른 선택자의 조상에 끼워지지 않고 독립적일 것이라고 가정합니다.
@media에서 확장
@extend는 [@media 및 다른 CSS @-규칙] 내에서 허용되지만, @-규칙 밖에 나타나는 선택자를 확장할 수 없습니다. 확장하는 선택자는 지정된 미디어 컨텍스트 내에서만 적용되며 전체 스타일 규칙을 복제하지 않고 생성된 선택기에서 제한을 유지할 수 있는 방법이 없기 때문입니다.
