如何在LESS中使用if语句

我正在寻找某种if语句来控制不同div元素的background-color 。

我已经尝试了下面，但它不编译

 @debug: true; header { background-color: (yellow) when (@debug = true); #title { background-color: (orange) when (@debug = true); } } article { background-color: (red) when (@debug = true); } 

Answer 1

LESS有mixin的警戒expression ，而不是个人属性。

所以你可以像这样创build一个mixin：

 .debug(@debug) when (@debug = true) { header { background-color: yellow; #title { background-color: orange; } } article { background-color: red; } } 

通过调用.debug(true);打开或closures它.debug(true); 或.debug(false) （或根本不调用它）。

Answer 2

有一种方法可以为个人（或多个）属性使用警卫。

 @debug: true; header { /* guard for attribute */ & when (@debug = true) { background-color: yellow; } /* guard for nested class */ #title when (@debug = true) { background-color: orange; } } /* guard for class */ article when (@debug = true) { background-color: red; } /* and when debug is off: */ article when not (@debug = true) { background-color: green; } 

…less于1.7; 编译为：

 header { background-color: yellow; } header #title { background-color: orange; } article { background-color: red; } 

Answer 3

我偶然发现了同样的问题，我find了一个解决scheme。

首先确保您至less升级到LESS 1.6。 你可以在这种情况下使用npm 。

现在你可以使用下面的mixin：

 .if (@condition, @property, @value) when (@condition = true){ @{property}: @value; } 

由于LESS 1.6，您也可以将PropertyNames传递给Mixins。 例如，你可以使用：

 .myHeadline { .if(@include-lineHeight, line-height, '35px'); } 

如果@ include-lineheightparsing为真， LESS将打印line-height: 35px ，如果@ include-lineheight不正确，将跳过mixin。

Answer 4

我为一些语法糖写了一个mixin;）
也许有人喜欢这种写作方式，而不是使用警卫

取决于less于1.7.0

https://github.com/pixelass/more-or-less/blob/master/less/fn/_if.less

用法：

 .if(isnumber(2), { .-then(){ log { isnumber: true; } } .-else(){ log { isnumber: false; } } }); .if(lightness(#fff) gt (20% * 2), { .-then(){ log { is-light: true; } } }); 

使用上面的例子

 .if(@debug, { .-then(){ header { background-color: yellow; #title { background-color: orange; } } article { background-color: red; } } });