less - 没有 mixin 的 LESS CSS 守卫

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 是可行的，但只为一个衬里制作一个似乎很愚蠢。有没有其他方法可以做到这一点？

谢谢

score 8 · Accepted Answer

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

@add-margin: true;

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

body { .margin(); }

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

score 4 · Accepted Answer

CSS Guards功能是在 Less v1.5.0 中引入的，因此现在我们可以像问题中提到的那样使用警卫。

@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都被认为是 falsy。这是因为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 的 Less 编译器，那么 Unicornist 发布的答案是最好的选择。

score 1 · Accepted Answer

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

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

3 回答 3