SCSS - 爲什麼擴展類以這種方式表現？

Question

我有了這個SCSS代碼：

.a { 
    color: red; 
} 

.b { 
    @extend .a; 
} 

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

我期待這樣的：

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

但我發現了這一點：

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

是否有任何文件指定行爲，還是編譯器的錯誤？

Answer 1

您正在從.a延伸.b，它得到一個選擇器，如.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; 
}