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; 
}