7

我遇到的一个常见问题@extend是尝试用另一个@extend.

这是一个例子：

// class selectors to be @extended
// these could also use % to be silent/placeholder selectors
.size-2xl {
    @include rem(font-size, 40px);
}
.size-3xl {
    @include rem(font-size, 60px);
}

// mapping the class selector properties onto some structural classes
.heading1 {
    @extend .size-3xl;
}
.heading1-small {
    @extend .heading1;
    @extend .size-2xl;
}

当 SCSS 被编译后，.heading1会.heading1-small得到正确的属性，但.heading1-small会显得太大。

@extend当-able 类映射到几个不同的选择器时，这似乎会发生。

当 SCSS 编译为 CSS 时，各种选择器组合成一个或多个具有多个选择器的规则集。

有时 SCSS 似乎是“乱序”编译的，因此编译.heading1后的多重选择器在多重选择器之后输出.heading1-small。

它甚至可能是@extend导致这种行为的嵌套。

避免这种情况的最佳方法是什么？我能想到的一些事情是：

  1. 使用@include('size-2xl')（少干）
  2. 不要@extend规则包含@extend（限制@extend 的使用）

谢谢。

4

1 回答 1

17

输出 CSS 中的规则集与在 SCSS 中定义的位置/顺序/序列完全相同，只是您只输出扩展.size-2xl和.size-3xl规则集。所以你需要交换这两个规则定义的位置（见demo）或者将size规则定义为mixins，并包含在header rules中（见demo）。所以，我认为你一定对如何@extend工作感到困惑。

如果你有这样的事情：

.class1 {
   foo: bar1;
}

.class2 {
   foo: bar2;
   @extend .class1;
}

您只会将选择器添加.class2到带有选择器的现有规则集中.class1- 因此输出将如下所示：

.class1, .class2 {
   foo: bar1;
}

.class2 {
   foo: bar2;
}

但是，如果我们不添加任何新属性.class2而只是使用@extend：

.class1 {
   foo: bar1;
}

.class2 {
   @extend .class1;
}

规则集.class2不会打印到 CSS，只会添加选择器.class1- 因此输出：

.class1, .class2 {
   foo: bar1;
}

这或多或少是您正在做的事情，只是将选择器.header1和添加.header2到规则.size-2xl和.size-3xl，因此输出将与这些规则在 SCSS 中定义的位置/顺序相同。

所以你在你的例子最后得到了什么：

  • 你定义规则集.size-2xl和.size-3xl
  • 您将.header1-small选择器添加到规则集中.size-2xl
  • 您将 添加.header1-small到.header1选择器并将两者都添加到规则集中.size-3xl
  • 规则集.size-2xl（现在在扩展 : 之后.size-2xl, .header1-small）被打印到 CSS
  • 规则集.size-3xl（现在在扩展 : 之后.size-3xl, .header1, .header1-small）被打印到 CSS
  • 规则集.header1（也是扩展的.header1, .header1-small）没有被打印出来，因为它没有任何定义的属性
  • 规则集.header1-small没有被打印出来，因为它没有任何定义的属性

另一个注意事项：如果您使用占位%符选择.size-3xl, .header1, .header1-small器（在 SCSS 中定义。.size-3xl.size-3xl

于 2013-10-24T09:17:46.267 回答