Question

使用@extend进行SASS继承非常有用。这样的事情非常简单：

＆＃13;

.my-base-class {
    font-size: 14px;    
}

.my-extended-class {
    @extend .my-base-class;
    
    color: red;
}

＆＃13;

然而，我希望能够重新定义.my-base-class中定义的.my-extended-class中的规则。像这样：

＆＃13;

.my-base-class {
    font-size: 14px;
}

.my-extended-class {
    @extend .my-base-class;
    
    font-size: 18px;
}

＆＃13;

在这种情况下，font-size重新定义为.my-extended-class中的18px。

我确实意识到我可以在.my-extended-class中添加！important到font-size。但是，出于两个主要原因，我不想这样做。＃1我被教导要避免！尽可能重要。＃2我实际上想要覆盖相当复杂的嵌套属性。像这样：

＆＃13;

.my-base-class {
    font-size: 14px;
    
    .child-of-my-base-class {
        margin: 10px;
        padding: 5px;
        background-color: green;
    }
}

.my-extended-class {
    @extend .my-base-class;
    font-size: 18px;
    
    .child-of-my-base-class {
        background-color: purple;    
    }
}

＆＃13;

这样的事情可能吗？

感谢。

亚伦

Answer 1

感谢@BlueCaret的jsfiddle。

看起来SASS确实开箱即用;它只是我在Visual Studio中的Web编译器被破坏了。

所以，问题回答了。感谢。

亚伦

使用覆盖进行SASS继承

1 个答案: