较少的CSS守卫没有mixin

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+),不需要使用"防护mixins"来实现这一点,你可以使用"css gaurds",因此OP的代码可以开箱即用

Answer 2

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

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