Question

假设我有一个像这样的LESS文件......

@myVariable: 5px;

.myRule {
    myProperty1: @myVariable;
    myProperty2: myOtherValue1;
}

当我用LESS编译时，我会得到这个结果。

.myRule {
    myProperty1: 5px;
    myProperty2: myOtherValue1;
}

但是，我没有在这个LESS文件中定义@myVariable，而是想从其他地方引用它。我引用的文件可能包含也可能不包含此变量。目前，如果缺少该变量，我将得到这样的结果。

.myRule {
    myProperty1: ;
    myProperty2: myOtherValue1;
}

是否有任何LESS功能允许我在没有提供变量的情况下完全删除属性，以便我的输出就像这样。

.myRule {
    myProperty2: myOtherValue1;
}

我已经查看了LESS的语言功能，无法找到任何可以做到这一点的内容。也许我错过了什么？

这是我想象的语法，但我很确定这不存在。

.myRule {
    when(exists(@myVariable)) {
        myProperty1: @myVariable;
    }
    myProperty2: myOtherValue1;
}

Answer 1

设置默认值和覆盖

//Load in a master variable file for all LESS
//containing all "possible" variables that may be used
//but set to some default values that "hide" the properties
//if the variable does not exist (such as "false" here) 

@myVariable: false;

//Load in your specific variable references from elsewhere 
//Individual variable may/may not be defined in this file
//but if one is defiend, this value overrides the previous value

@myVariable: 5px;

//Define a mixin to activate the setting of the property
//only if the value is not the original default hiding value

.setIfValue(myVariable) when not (@myVariable = false) {
    myProperty1: @myVariable;
}

//Use the mixin to conditionally set the value into other mixins

.myRule {
    .setIfValue(myVariable);
    myProperty2: myOtherValue1;
}

默认输出

.myRule {
  myProperty2: myOtherValue1;
}

重写输出

.myRule {
  myProperty1: 5px;
  myProperty2: myOtherValue1;
}

Answer 2

我认为你的语法太复杂了。它应该是这样的：

.myRule {
    & when (@myVariable = false) {
      myProperty1: @myVariable;
    }
    myProperty2: myOtherValue1;
}

此功能（显然）称为CSS Guards。

似乎您可以检查变量是否具有特定值，但不能检查变量是否允许您检查是否已定义。所以，我想其他文件应该始终将此变量定义为先决条件，但它可以将其设置为“假”＆＃39; （或任何类型的默认值）表示不应该使用此属性。

如果变量不存在，是否有一种方法可以删除属性？

2 个答案:

设置默认值和覆盖