css - SCSS，如何@extend嵌套的＆符号“前缀”？

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的预期行为

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

标签： csssass

Answer 1

也许我工作的版本较旧，但我不相信这是可能的。您可以将属性更改为 mixin，如下所示：

@mixin classStyle {
  color: green;

  &-a{
    color: red;
  }
}

.firstClass {
  @include classStyle;
}

.secondClass {
  @include classStyle;
}