css - 将@extend 与父样式合并并创建一个类名

Question

我试图将样式合并到一个类中，但它显示错误。请看下面的示例。

%banner-style{
  banner {
    padding: 140px 0 210px;
    background: url(https://im2.ezgif.com/tmp/ezgif-2-92c6382d82ba.jpg) top center/cover no-repeat;
    &.row {
        margin: 0;
    }
    .main-heading {
        font-size: 40px;
        letter-spacing: -1px;
        font-weight: 600;
        padding-right: 20px;
        sup {
            font-size: 10px;
            vertical-align: super;
        }
    }
  }
}

并且我希望它与父类.parent合并

.parent{
  color: red;
  &_@extend %banner-style;
}

使用&合并为一个类名。但显示错误，除非我这样做

.parent{
      color: red;
      &_{@extend %banner-style};
    }

这与删除 &_ 相同。

我想要 .parent_banner{...} 却得到了 .parent_banner{...}；

有谁知道我怎样才能做到这一点？

Answer 1

您得到的正是应该发生的事情。 Extend 不会“合并”类，它会将另一个类/占位符扩展到新选择器的样式中。

这意味着如果我写:

%banner-style {
  background: black;
}

.parent { 
  @extend %banner-style;
}
.other-selector { 
  @extend %banner-style;
  color: red;
}

我得到的css会是

.parent {
  background: black;
}
.other-selector {
  color: red;
  background: black;
}

所以你得到了预期的结果。如果你想让它按照你想要的方式“工作”，你可以将代码更改为:

%banner-style {
    padding: 140px 0 210px;
    background: url(https://im2.ezgif.com/tmp/ezgif-2-92c6382d82ba.jpg) top center/cover no-repeat;
    &.row {
        margin: 0;
    }
    .main-heading {
        font-size: 40px;
        letter-spacing: -1px;
        font-weight: 600;
        padding-right: 20px;
        sup {
            font-size: 10px;
            vertical-align: super;
        }
    }
}

.parent{
  color: red;

  &_banner {
    @extend %banner-style;
  };
}

注意:我删除了 banner block ，因为您似乎不想要它(而且 banner 不是普通的 html 元素)。