Question

我有这个SCSS代码：

.a {
    color: red;
}

.b {
    @extend .a;
}

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

我期待着这个：

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

但我得到了这个：

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

SCSS - 为什么扩展类的行为方式如此？

1 个答案: