在SASS中使用@extend进行意外嵌套的说明

Question

我有一个嵌套类.super &，我无法弄清楚为什么.one_two--alt类被.super类作为前缀，即使标记显示它不应该。

SCSS

.one{
  &__two{
    color: red;
    &--alt{
      @extend .one__two;
    }
    .super &{
      color: blue;
    }
  }
}

Outputed CSS：

.one__two, .one__two--alt {
  color: red;
}
.super .one__two, .super .one__two--alt {
  color: blue;
}

预期的CSS

.one__two, .one__two--alt {
  color: red;
}
.super .one__two{
  color: blue;
}

Answer 1

好吧，通过使用类扩展（而不是使用占位符），您可以更改&的值，更准确地说，您可以向其中添加更多选择器，因此您还有--alt个绑定到&的类{1}}后来以.super为前缀（由您自己）。

通过使用sass占位符，您可以获得正确的输出。

%red{ color: red }

.one {
  &__two{
    @extend %red;
    &--alt { @extend %red}
    .super & { color: blue }
  }
}