如何在scss中从其他类@extend时覆盖css样式？

Question

I have scss code:

.a {
    height: 100px;
    width: 100px;
}

.b {
    @extend .a;
    height: 200px;
}

编译后的CSS如下所示：

.a, .b {
    height: 100px;
    width: 100px;
}

.b {
    height: 200px;
}

当我应用这个样式后，dom中的`

`将会高度为100px而不是200px。在这种情况下，我该如何让CSS使用高度为200px呢？

- Joey Yi Zhao

---

你能重新表达一下你的问题吗？看起来.b已经覆盖了.a的高度。 - Ralph David Abernathy

“.b” 已经覆盖了 “height”。你的意思是什么？ - Abin Thaha

那么为什么不直接在.a选择器中进行更改：.b { @extend .a; } 和 .a { height: 200px;} - Hanif

抱歉让您感到困惑，我已经重新表述了我的问题。 - Joey Yi Zhao

那么在下面的大多数选择器中，哪个会应用这个通用规则？这是任何CSS文件的通用规则。 - Hanif

Answer 1

那么在下面的大多数选择器中，哪个选择器将适用于此CSS文件的通用规则。

高度将为<div class="a b">200像素；

.a {
    height: 100px;
    width: 100px;
    }   
.b {
    @extend .a;
    height: 200px;
}

高度将是<div class="a b"> 100像素;

.b {
    @extend .a;
    height: 200px;
}
.a {
    height: 100px;
    width: 100px;
}

始终高度将为<div class="a b"> 200px，顺序无关紧要。

.a {
    height: 100px;
    width: 100px;
    &.b {
       height: 200px;
    }
}

- Hanif

Answer 2

这已经完全符合您的要求了。

如果您在.a,.b上方有.b，最新的样式将会胜出。

请查阅级联顺序

最后，按照指定的顺序排序：如果两个声明具有相同的权重、来源和特殊性，则后面指定的声明将获胜。导入样式表中的声明被认为是在样式表本身中的任何声明之前。

.a, .b {
    height: 100px;
    width: 100px;
}

.b {
    height: 200px;
}

/* ignore */
div{
  background-color: red;
}
body{
  display: inline-flex;
}

<div class="a"></div>
<span>|</span>
<div class="b"></div>
<span>|</span>
<div class="a b"></div>

- jdickel

Answer 3

如果我对你的问题的理解是正确的，它就不能被覆盖。

.a, .b {
    height: 100px;
    width: 200px;
}

因为它会将width: 200px;应用于.a和.b，所以您需要的是将width: 200px;仅应用于.b，对吗？这样，您提供的代码已经完美运行。

- Abin Thaha

Answer 4

你可以使用一个包装器

.a {
    height: 100px;
    width: 100px;
}

.b {
    @extend .a;
}

.wrapper .b {
    height: 200px;
}

HTML

<div class='wrapper'><div class='b'> XXX </div></div>

你也可以使用!important。

.a {
    height: 100px;
    width: 100px;
}

.b {
    @extend .a;
    height: 200px !important;
}

- Yevgeniy Afanasyev