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规则集.因此,您需要切换这两个规则定义的位置(请参阅演示)或将大小规则定义为mixins,并将它们包含在标题规则中(请参阅演示).所以,我认为你必须混淆一些关于如何@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中定义.