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块是因为您似乎不希望这样做（并且banner不是普通的html元素）。

以父样式合并@extend并创建一个类名

1 个答案: