SCSS，如何扩展嵌套的“＆”前缀？

Question

嵌套的与号前缀不会用@extend扩展

.firstClass{
  color: green;
    &-a{
      color: red;
    }
}
.secondClass{
    @extend .firstClass;
}

预期输出为

.firstClass, .secondClass{
    color: green;
}
.firstClass-a, .secondClass-a{
    color: red;
}

但是实际输出根本没有.secondClass-a。

.firstClass, .secondClass{
    color: green;
}
.firstClass-a{
    color: red;
}

我发现这是使用@extend https://github.com/sass/sass/issues/2154

的预期行为

但是有没有可以扩展嵌套的＆前缀的解决方法？

Answer 1

也许我开发的版本较旧，但我认为这是不可能的。您可以这样将属性更改为mixin：

@mixin classStyle {
  color: green;

  &-a{
    color: red;
  }
}

.firstClass {
  @include classStyle;
}

.secondClass {
  @include classStyle;
}