SCSS，如何@extend 嵌套&“前缀"?

本文介绍了SCSS，如何@extend 嵌套&“前缀"?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

嵌套的与号前缀不会被 @extend

The nested ampersand prefix doesn't get expanded with @extend

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

预期的输出是

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

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

But the actual output doesn't have the .secondClass-a at all.

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

但是有没有可以扩展嵌套与号前缀的解决方法?

But is there a workaround that can extend nested ampersand prefix?

也许我工作的版本比较旧，但我不相信这是可能的.您可以将属性更改为 mixin:

Maybe the versions I worked on were older but I don't believe it was possible. You could change your properties to a mixin as such:

@mixin classStyle {
  color: green;

  &-a{
    color: red;
  }
}

.firstClass {
  @include classStyle;
}

.secondClass {
  @include classStyle;
}

这篇关于SCSS，如何@extend 嵌套&“前缀"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！