SCSS，如何@extend 嵌套&“前缀"? [英] SCSS, how to @extend Nested ampersand "prefix"?

问题描述

嵌套的与号前缀不会被 @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;
}

我发现这是使用 @extend https 的预期行为://github.com/sass/sass/issues/2154

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

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 嵌套&“前缀"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！