CSS 如何在 LESS 中使用 if 语句
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14910667/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use if statements in LESS
提问by nkint
I'm looking for some kind of if-statement to control the background-colorof different divelements.
我正在寻找某种 if 语句来控制background-color不同div元素的。
I have tried the below, but it doesn't compile
我试过下面的，但它不编译
@debug: true;
header {
background-color: (yellow) when (@debug = true);
#title {
background-color: (orange) when (@debug = true);
}
}
article {
background-color: (red) when (@debug = true);
}
采纳答案by freejosh
LESS has guard expressionsfor mixins, not individual attributes.
LESS 有针对 mixin 的保护表达式，而不是单个属性。
So you'd create a mixin like this:
所以你会创建一个像这样的 mixin：
.debug(@debug) when (@debug = true) {
header {
background-color: yellow;
#title {
background-color: orange;
}
}
article {
background-color: red;
}
}
And turn it on or off by calling .debug(true);or .debug(false)(or not calling it at all).
并通过调用.debug(true);or .debug(false)（或根本不调用它）来打开或关闭它。
回答by Onur Y?ld?r?m
There is a way to use guards for individual (or multiple) attributes.
有一种方法可以对单个（或多个）属性使用守卫。
@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;
}
...and with Less 1.7; compiles to:
...和小于 1.7; 编译为：
header {
background-color: yellow;
}
header #title {
background-color: orange;
}
article {
background-color: red;
}
回答by Pascal Raszyk
I stumbled over the same question and I've found a solution.
我偶然发现了同样的问题，并找到了解决方案。
First make sure you upgrade to LESS 1.6 at least.
You can use npmfor that case.
首先确保您至少升级到 LESS 1.6。您可以npm用于这种情况。
Now you can use the following mixin:
现在您可以使用以下 mixin：
.if (@condition, @property, @value) when (@condition = true){
@{property}: @value;
}
Since LESS 1.6 you are able to pass PropertyNames to Mixins as well. So for example you could just use:
从 LESS 1.6 开始，您也可以将 PropertyNames 传递给 Mixin。例如，您可以使用：
.myHeadline {
.if(@include-lineHeight, line-height, '35px');
}
If @include-lineheight resolves to trueLESS will print the line-height: 35pxand it will skip the mixin if @include-lineheight is not true.
如果@include-lineheight 解析为true，则LESS 将打印，line-height: 35px如果@include-lineheight 不为true，它将跳过mixin。
回答by Pascal Raszyk
I wrote a mixin for some syntactic sugar ;)
Maybe someone likes this way of writing if-then-else better than using guards
我为一些语法糖编写了一个 mixin ;)
也许有人更喜欢这种写 if-then-else 的方式而不是使用守卫
depends on Less 1.7.0
取决于小于 1.7.0
https://github.com/pixelass/more-or-less/blob/master/less/fn/_if.less
https://github.com/pixelass/more-or-less/blob/master/less/fn/_if.less
Usage:
用法：
.if(isnumber(2), {
.-then(){
log {
isnumber: true;
}
}
.-else(){
log {
isnumber: false;
}
}
});
.if(lightness(#fff) gt (20% * 2), {
.-then(){
log {
is-light: true;
}
}
});
using on example from above
使用上面的例子
.if(@debug, {
.-then(){
header {
background-color: yellow;
#title {
background-color: orange;
}
}
article {
background-color: red;
}
}
});
