不,您不能以这种方式单独扩展单个财产。您可以扩展整个规则集,但是当您扩展时,选择器会被组合在一起,因此!important
必须应用于两个选择器或不应用于任何选择器。
在您的情况下,属性值不同,因此选择器不能组合在一起。然而,如果background-color
是原始类中您希望应用于派生类的唯一属性(或者)如果您希望将原始类的所有属性应用于派生类并追加!important
对于所有这些,那么您可以使用以下内容。
.pfx-grey-light-bg {
background-color: #e5e5e7;
}
.pfx-metro-orange-dark-bg{
.pfx-grey-light-bg !important;
}
编译时,它将产生以下输出:
.pfx-grey-light-bg {
background-color: #e5e5e7;
}
.pfx-metro-orange-dark-bg {
background-color: #e5e5e7 !important;
}
或者,如果您的基类有多个属性并且您只想应用background-color
对于派生类,那么您有以下三种选择:
选项 1:使用变量
@color: #e5e5e7;
.pfx-grey-light-bg {
background-color: @color;
color: #fff;
}
.pfx-metro-orange-dark-bg{
background-color: @color !important;
}
选项 2:编写一个虚拟 mixin 并按如下方式使用它。这不会在输出 CSS 中导致任何额外的代码行,因为 mixin 有括号,因此不会输出。
.dummy-mixin(){
background-color: #e5e5e7;
}
.pfx-grey-light-bg {
.dummy-mixin;
color: #fff;
}
.pfx-metro-orange-dark-bg{
.dummy-mixin !important;
padding: 10px;
}
选项 3:使用受保护的 mixin 和可选的更复杂@important
决定是否追加的参数!important
或不。除非您有非常迫切的需求,否则我不会推荐这样做。
.dummy-mixin(@color, @important: no){
& when (@important = no){
background-color: @color;
}
& when (@important = yes){
background-cokor: @color !important;
}
}
.pfx-grey-light-bg {
.dummy-mixin(#e5e5e7);
color: #fff;
}
.pfx-metro-orange-dark-bg{
.dummy-mixin(#e5e5e7; yes);
padding: 10px;
}