解释SASS中使用@extend的意外嵌套

我有一个嵌套的类

.super&

，我不明白为什么

.one\u two--alt

类的前缀是

.super

类，尽管标记表明它不应该这样做

SCSS

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

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

输出的CSS:

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

预期CSS

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

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

---

好的，通过使用类（而不是占位符）进行扩展，您可以更改

&

的值，更准确地说，您可以向它添加更多选择器，因此您有额外的

--alt

类绑定到

&

，然后前缀为

.super

（由您）

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

%red{ color: red }

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

---

啊。。。干杯我将使用占位符。