将@extend 与父样式合并并创建一个 class 名称

Question

我正在尝试将样式合并为一个 class 但显示错误。看下面的例子。

%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;
        }
    }
  }
}

我希望它与父级合并 class .parent

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

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

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

这与我删除 &_.

相同

我想要 .parent_banner {...} 但得到的却是 .parent_ banner{...};

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

Answer 1

你得到的正是应该发生的事情。 Extend 不会 "merge" 类，它会将另一个 class/placeholder 扩展到新选择器的样式中。

这意味着如果我写：

%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;
}

所以你得到了预期的结果。如果您想按照自己的方式制作此 "work"，只需将代码更改为：

%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 块，因为您似乎不想要它（横幅不是普通的 html 元素）。

将@extend 与父样式合并并创建一个 class 名称

merge @extend with parent style and make one class name

css

sass

extend