是否可以延长扩展属性?我在一个(分布式)文件中有定义,需要在我的特殊情况下将!important
添加到现有属性。
例如,我有一个较少的文件来定义这个类
.pfx-grey-light-bg {
background-color: #e5e5e7;
}
我现在想引用这个较少的文件,但是将颜色扩展到重要的
.pfx-metro-orange-dark-bg:extend(.pfx-orange-dark-bg){
//Pseudo code
//background-color: &extended.backgroundColor !important
}
结果应为
.pfx-metro-grey-light-bg {
background-color: #e5e5e7 !important;
}
答案 0 :(得分:2)
不,你不能以这种方式单独扩展一个属性。您可以扩展整个规则集,但是当您进行扩展时,选择器会被合并,因此!important
必须既可以应用于选择器,也可以应用于无。
在您的情况下,属性值不同,因此选择器不能组合在一起。但是,如果您希望将原始类的所有属性应用于派生类并追加{{1},那么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;
}
应用于派生类,那么您有三个选项,如下所示:
选项1:使用变量
background-color
选项2:编写一个虚拟mixin并像下面一样使用它。这不会在输出CSS中引起任何额外的代码行,因为mixin有括号,因此不会输出。
@color: #e5e5e7;
.pfx-grey-light-bg {
background-color: @color;
color: #fff;
}
.pfx-metro-orange-dark-bg{
background-color: @color !important;
}
选项3:使用受保护的mixins和可选的.dummy-mixin(){
background-color: #e5e5e7;
}
.pfx-grey-light-bg {
.dummy-mixin;
color: #fff;
}
.pfx-metro-orange-dark-bg{
.dummy-mixin !important;
padding: 10px;
}
参数来决定是否附加@important
更复杂。除非你有非常紧迫的需求,否则我不会推荐这个。
!important