Question

我有scss代码：

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

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

编译的css看起来像：

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

.b {
    height: 200px;
}

当我应用此样式时，dom <div class="a b">的高度为100px而不是200px。在这种情况下，如何使css的高度为200px？

Answer 1

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

您可能.b高于.a, .b，然后是最新款式。

阅读cascading order

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

.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>

Answer 2

然后在这个下面的大多数选择器将应用这是任何CSS文件的一般规则。

高度为<div class="a b"> 200px;

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

高度为<div class="a b"> 100px;

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

始终高度为<div class="a b"> 200px订单剂量无关紧要;

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

Answer 3

如果我对你的问题的理解是正确的，那就不能像

那样被覆盖

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

因为它会width: 200px;同时适用于.a和.b，您需要的是仅将width: 200px;应用于.b，对吗？这样，您提供的代码就已经完善了。

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;
}

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

4 个答案: