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 - 能够将类映射到几个不同的选择器上时，似乎会发生这种情况。

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

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

它甚至可能是嵌套@extend导致此行为。

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

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

感谢。

Answer 1

输出CSS中的规则集与SCSS中定义的位置/顺序/顺序完全相同，只是您只输出扩展的.size-2xl和.size-3xl规则集。因此，您需要切换这两个规则定义的位置（请参阅demo）或将 size 规则定义为mixins，并将它们包含在标头规则中（请参阅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 { {1}}将是不可见的，但在CSS中，整个事情仍将在SCSS中定义.size-3xl规则的地方进行编译。

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

1 个答案:

那么你在例子中得到的是什么：