可以在更少的地方引用扩展属性吗? [英] Possible to reference extended property in less?

问题描述

是否可以在更短的时间内扩展扩展属性?我在一个(分布式)文件中有定义，在特殊情况下需要在现有属性中添加!important.

Is it possible to extend a extended property in less? I have definitions in one (distributed) file and need to add !important to the existing property in my special case.

例如，我有一个较少的文件来定义此类

As example I have a less file defining this class

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

我现在想引用这个较少的文件，但是将颜色扩展为重要

I'd like to reference this less file now but extend the color to 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;
}

推荐答案

不，您不能以这种方式单独扩展单个属性.您可以扩展整个规则集，但是在扩展时，选择器将组合在一起，因此!important必须同时应用于两个选择器或不应用于任何选择器.

No, you cannot extend a single property alone in that way. You can extend the whole ruleset but when you extend, the selectors are combined and so the !important would have to apply either to both the selectors or to none.

在您的情况下，属性值不同，因此无法将选择器组合在一起.但是，如果background-color是原始类中希望应用于派生类的唯一属性(或)如果希望将原始类的所有属性应用于派生类并将!important附加到所有然后您可以使用以下内容.

In your case the property values are different and hence the selectors cannot be grouped together. However, if the background-color is the only property within the original class that you wish to be applied to the derived class (or) if you wish to apply all properties of the original class to the derived class and append !important to all of them then you can use the below.

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

.pfx-metro-orange-dark-bg{
    .pfx-grey-light-bg !important;
}

编译后，将产生以下输出:

When compiled, it would produce the following output:

.pfx-grey-light-bg {
    background-color: #e5e5e7;
}
.pfx-metro-orange-dark-bg {
    background-color: #e5e5e7 !important;
}

---

或者，如果您的基类具有多个属性，并且您只想将background-color应用于派生类，则可以使用以下三个选项:

---

Or, if your base class has multiple properties and you want to apply only the background-color to the derived class, then you have three options as follows:

选项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带有括号，因此将不会输出.

Option 2: Write a dummy mixin and use it like below. This will not cause any extra lines of code in the output CSS because the mixin has parentheses and hence will not be output.

.dummy-mixin(){
    background-color: #e5e5e7;
}
.pfx-grey-light-bg {
    .dummy-mixin;
    color: #fff;
}

.pfx-metro-orange-dark-bg{
    .dummy-mixin !important;
    padding: 10px;
}

选项3:使用受保护的mixins和可选的@important参数来决定是否附加!important，从而使操作更为复杂.除非您有非常迫切的需求，否则我不建议您这样做.

Option 3: More complex using guarded mixins and an optional @important parameter to decide on whether to append !important or not. I would not recommend this unless you have very pressing needs.

.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;
}

这篇关于可以在更少的地方引用扩展属性吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！