将@extend 与父样式合并并创建一个类名答案

【问题标题】：merge @extend with parent style and make one class name将@extend 与父样式合并并创建一个类名
【发布时间】：2019-08-05 11:58:15
【问题描述】：

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

%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{...}；

有谁知道我如何做到这一点？

【问题讨论】：

标签： css sass extend

【解决方案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 块，因为您似乎不希望这样做（并且横幅不是普通的 html 元素）。

【讨论】：