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