SCSS - 用另一个 @extend 覆盖 @extend

Question

@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 的使用）

谢谢。

Answer 1

输出 CSS 中的规则集与在 SCSS 中定义的位置/顺序/序列完全相同，只是您仅输出扩展的 .size-2xl 和 .size-3xl 规则集。所以你需要切换这两个规则定义的位置（参见demo）或者将size规则定义为mixins，并将它们包含在header规则中（参见@987654322 @)。所以，我认为您一定对@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）没有被打印出来，因为它没有任何定义的属性
• ruleset .header1-small 没有被打印出来，因为它没有任何定义的属性

另一个注意事项：如果您使用占位符选择器 (%) 也会发生同样的情况，只是这样可能会更加混乱，例如在 .size-3xl, .header1, .header1-small 中，.size-3xl 将是不可见，但在 CSS 中，整个东西仍然会在 SCSS 中定义 .size-3xl 规则的地方编译。