可以在 less 中引用扩展属性吗？

Question

是否可以在 less 中扩展扩展的属性？我在一个（分布式）文件中有定义，在我的特殊情况下需要将 !important 添加到现有的属性。

例如，我有一个 less 文件定义了这个 class

.pfx-grey-light-bg {
    background-color: #e5e5e7;
}

我现在想引用这个 less 文件，但将颜色扩展到 important

.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 必须同时应用于两个选择器或 none.

在您的情况下，属性值不同，因此选择器不能组合在一起。但是，如果 background-color 是原始 class 中您希望应用于派生 class 中的唯一属性（或者）如果您希望应用的所有属性原始的 class 到派生的 class 并将 !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;
}

或者，如果您的基础 class 具有多个属性，并且您只想将 background-color 应用于派生的 class，那么您有以下三种选择：

选项 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：更复杂，使用受保护的混入和可选的 @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;
}

可以在 less 中引用扩展 属性 吗？

Possible to reference extended property in less?

less

可以在 less 中引用扩展属性吗？