Question

我刚刚进入LESS并试图找出如何在没有mixins的情况下制作条件css语句。我发现我有很多单行css语句只出现一次但依赖于某些变量或条件而且使用mixins有点无意义，因为它永远不会被重用。

实施例

@add-margin: true;

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

理想情况下我想要这个：

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

但这不起作用。使用mixin有效，但似乎很傻，只为一个衬垫制作一个。有没有其他方法可以做到这一点？

由于

Answer 1

是的，你可以，它与你的代码类似。

@add-margin: true;

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

body { .margin(); }

更新：使用最新版本的LESS（1.5 +），不需要使用“保护混合”来实现此目的，您可以使用“css gaurds”代替，因此OP的代码将开箱即用

Answer 2

在Less v1.5.0中引入了

CSS Guards功能，因此现在我们可以像问题中提到的那样使用警卫。

@add-margin: true;

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

如果有这种情况，你需要根据同一个变量为不同的选择器分配多个这样的属性，可以使用&选择器实现如下所示。

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

注意：正如memeLab在评论中所提到的，除@add-margin以外的true变量的任何值均为considered as falsy。这是因为true是关键字，而'true'是字符串值。例如，下面的内容不会输出任何内容。

@add-margin: 'true';

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

但是，下面的方法可行，因为它进行了字符串比较。

@add-margin: 'true';

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

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

Answer 3

不，这种形式是不可能的。

您可以使用等于0或1的变量并乘以20然后总是输出规则，或者使用JavaScript（我建议您避免这种情况）将true转换为0或20并始终输出规则，但是如果你想要有条件地添加房产，你需要警卫。