Less 没有混入的CSS保护更少

我只是进入了LESS，并试图找出如何在没有混音的情况下生成条件css语句。我发现我有很多单行css语句，它们只出现一次，但依赖于某些变量或条件，使用mixin有点毫无意义，因为它永远不会被重用

例如

@add-margin: true;

body {
    margin-top: 20px;  //I only want this if add-margin is true
}

所以理想情况下我想要这个：

body when (@add-margin) {
     margin-top: 20px;
}

但这不起作用。使用混音器是可行的，但仅仅为一行制作混音器似乎很愚蠢。有没有其他方法可以让我这样做

---

谢谢

不，那是不可能的

---

您可以使用等于0或1的变量乘以20，然后始终输出一个规则，或者使用JavaScript（我建议您避免这样做）将true转换为0或20，然后始终输出一个规则，但如果您希望有条件地添加属性，则需要保护。

可以，这与您的代码类似

@add-margin: true;

.margin() when (@add-margin) {
    margin-top: 20px;
}

body { .margin(); }

更新：使用最新版本的LESS（1.5+），不需要使用“guarded Mixin”来实现这一点，您可以使用“css gaurds”，因此OP的代码将开箱即用功能是在LESS v1.5.0中引入的，因此现在我们可以按照问题中提到的方式使用guards

@add-margin: true;

body when (@add-margin){
    margin-top: 20px;
}

如果在这种情况下，您需要基于同一变量将多个这样的属性分配给不同的选择器，则可以使用

&

选择器如下实现

& when (@add-margin){
    body{
        margin-top: 20px;
    }
    h1{
        margin-top: 10px;
    }
}

注意：如注释中所述，

@add margin

变量中除

true

以外的任何值均为。这是因为

true

是一个关键字，而

'true'

是一个字符串值。例如，下面的命令将不输出任何内容

@add-margin: 'true';

body when (@add-margin){
    margin-top: 20px;
}

但是，下面的方法会起作用，因为它会进行字符串比较

@add-margin: 'true';

body when (@add-margin = 'true'){
    margin-top: 20px;
}

---

如果您使用的编译器低于v1.5.0，那么由发布的答案是最好的选择。

您的代码现在将使用最新版本编译。@OnurYıldırım谢谢！除了

@add margin=

之外，应该是

@add margin:

，ofcourse@memeLab更正。谢谢。请注意：除了

true

之外的任何内容都是虚假的，包括字符串

'true'

（引号中）