SCSS-用另一个@extend覆盖@extend [英] SCSS - override an @extend with another @extend

问题描述

@extend 的一个常见问题是尝试用另一个 @extend 覆盖继承的属性时。

A common problem I have with @extend is when trying to override the inherited properties with another @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 也会出现大。

When the SCSS is compiled, .heading1 and .heading1-small will get the correct properties, but .heading1-small will appear too large.

这似乎发生在将 @extend 级别的类映射到一些不同的选择器上时。

This seems to occur when the @extend-able class is mapped onto a few different selectors.

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

When the SCSS is compiled to CSS, the various selectors are combined into one or more rule sets with multiple selectors.

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

Sometimes the SCSS appears to be compiled 'out of order', so that the compiled .heading1 multiple selector is output after the .heading1-small multiple selector.

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

It could even be the nested @extend causing this behaviour.

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

What is the best way to avoid this situation? Some things I can think of off the top of my head are:

1. 使用 @include（'size-2xl '）（较少DRY）


2. 不包含的 @extend 规则@extend （限制使用@extend）

1. use @include('size-2xl') (less DRY)
2. don't @extend rules containing @extend (limits the use of @extend)

谢谢。

推荐答案

输出CSS中的规则集与SCSS中定义的位置/顺序/顺序完全相同，只是您只输出扩展的 .size-2xl 和 .size-3xl 规则集。因此，您需要切换这两个规则定义的位置（请参见 演示 ）或将 size 规则定义为mixins，并将其包含在 header 规则中（请参阅 演示 ）。因此，我认为您一定会对 @extend 的工作方式感到困惑。

The rulesets in the output CSS are in the exact same place/order/sequence as they have been defined in SCSS, just that you only output the extended .size-2xl and .size-3xl rulesets. So you need to switch the places of this two rule definitions (see demo) or define the size rules as mixins and include them in the header rules (see demo). So, I think you must be confusing something about how @extend works.

如果您有类似的事情：

.class1 {
   foo: bar1;
}

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

您将只添加选择器 .class2 使用选择器 .class1 到现有规则集-这样输出将如下所示：

You will only add the selector .class2 to the already existing ruleset with the selector .class1 - so the output will look like this:

.class1, .class2 {
   foo: bar1;
}

.class2 {
   foo: bar2;
}

但是，如果我们不向 .class2添加任何新属性， / code>，但只需使用 @extend ：

.class1 {
   foo: bar1;
}

.class2 {
   @extend .class1;
}

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

The .class2 ruleset will not be printed to CSS and only the selector will be added to .class1 - hence the output:

.class1, .class2 {
   foo: bar1;
}

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

This is more or less what you are doing, just adding the selectors .header1 and .header2 to the rules .size-2xl and .size-3xl, so the output will be in the same place/order in which these rules are defined in 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 不会打印出来，因为它没有任何定义的属性
  

• you define the rulesets .size-2xl and .size-3xl
• you add the .header1-small selector to the rulesets .size-2xl
• you add the .header1-small to the .header1 selector and add both to ruleset .size-3xl
• ruleset .size-2xl (now after extending: .size-2xl, .header1-small) gets printed to CSS
• ruleset .size-3xl (now after extending: .size-3xl, .header1, .header1-small) gets printed to CSS
• ruleset .header1 (also the extended one .header1, .header1-small) doesn't get printed out as it does not have any defined properties
• ruleset .header1-small doesn't get printed out as it does not have any defined properties

另一个说明：如果您使用占位符选择器（％）只是这样可能会更加令人困惑，例如 .size-3xl，.header1，.header1-small .size -3xl 将是不可见的，但是在CSS中，整个内容仍将在 .size-3xl 规则中定义的地方进行编译。 SCSS。

Another note: The same will happen also if you use placeholder selectors (%) just that then it may be even more confusing, for example in .size-3xl, .header1, .header1-small the .size-3xl will be invisible, but in the CSS the whole thing will still get compiled in the place where the .size-3xl rule was defined in SCSS.

这篇关于SCSS-用另一个@extend覆盖@extend的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！