SCSS - warum verhalten sich erweiterte Klassen so?

Question

Ich habe diesen Code SCSS bekam:

.a { 
    color: red; 
} 

.b { 
    @extend .a; 
} 

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

ich dies erwartet:

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

Aber ich diese bekommen:

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

Gibt es ein Dokument angeben, dass Verhalten, oder es ist ein Fehler des Compilers?

Answer 1

Sie erweitern .b von .a und es wird ein Selektor wie .a, .b. Wenn Sie einen Pseudoselektor wie :not verwenden, wird der Selektor generiert. In diesem Fall verwenden Sie einen Platzhalterselektor mit %.

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

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

.b { 
    @extend %redColor; 
} 

Ausgang:

.a, .b { 
    color: red; 
} 

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