sass - 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导致这种行为。

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

使用 @include('size-2xl') (少干)

不要@extend包含 @extend 的规则(限制@extend 的使用)

谢谢。

Answer 1

输出 CSS 中的规则集与在 SCSS 中定义的位置/顺序/顺序完全相同，只是您仅输出扩展的 .size-2xl和 .size-3xl规则集。因此，您需要切换这两个规则定义的位置(参见 demo )或将大小规则定义为 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 中 .size-3xl将是不可见的，但在 CSS 中，整个内容仍将在 .size-3xl 所在的位置编译。规则在 SCSS 中定义。