当 @extend 来自 scss 中的其他类时，如何覆盖 css 样式？

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

那么下面最下面的哪个选择器将应用这是任何 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;
    }
}