Question

是否可以延长扩展属性？我在一个（分布式）文件中有定义，需要在我的特殊情况下将!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;
}

Answer 1

不，你不能以这种方式单独扩展一个属性。您可以扩展整个规则集，但是当您进行扩展时，选择器会被合并，因此!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

可以参考扩展属性少吗？

1 个答案: