SCSS - 왜 확장 클래스는 이런 식으로 동작합니까?</p> <pre><code>.a { color: red; } .b { @extend .a; } :not(.a) { color: green; } </code></pre> <p>나는이 기대 해요 : :</p> <pre><code>:not(.a) { color: green; } </code></pre> <p>을하지만이 받고 있어요 :

Question

나는이 SCSS 코드를 가지고 어떤 문서 지정이 있습니까

:not(.a):not(.b) { 
    color: green; } 

을 그 동작, 또는 컴파일러의 버그입니까?

Answer 1

.b을 .a에서 연장하면 .a, .b과 같은 선택기가 표시됩니다. :not과 같은 의사 선택기를 사용할 때 생성 된 선택기를 사용하고 있습니다.

이 경우 %과 함께 자리 표시 자 선택기를 사용하십시오.

%redColor{ 
    color: red; 
} 
%greenColor{ 
    color: green; 
} 

.a { 
    @extend %redColor; 
    :not(&){ 
     @extend %greenColor; 
    } 
} 

.b { 
    @extend %redColor; 
} 

출력 :

.a, .b { 
    color: red; 
} 

:not(.a) { 
    color: green; 
}