如何在 LESS 中使用 if 语句答案

【问题标题】：How to use if statements in LESS如何在 LESS 中使用 if 语句
【发布时间】：2013-02-01 08:53:30
【问题描述】：

我正在寻找某种 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);
}

【问题讨论】：

你检查过文档吗？

标签： less

【解决方案1】：

有一种方法可以对单个（或多个）属性使用保护。

@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;
}

...和更少的 1.7；编译为：

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

【讨论】：

这是对原始问题的更接近的答案。主题启动器没有要求使用 mixin。
我实际上是在寻找条件属性，并浏览了许多网站和答案，这些网站和答案只提供了膨胀。这是直接和重点，并提供了一种替代方法来编写 3 行以上的代码来有条件地包含单个属性。
我很确定这解决了 OP 正在寻找的问题和方法。感谢您提供这个。
这应该是答案！ +1
好吧，因为 "CSS Guards" 的功能在 Less v1.5.0（2013 年 10 月发布）中引入，所以它不可能是 2013 年 2 月的答案；）

【解决方案2】：

LESS 有 guard expressions 用于混合，而不是单个属性。

所以你会像这样创建一个 mixin：

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

    article {
      background-color: red;
    }
}

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

【讨论】：

【解决方案3】：

我偶然发现了同样的问题，我找到了解决方案。

首先确保您至少升级到 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-lineheight 解析为true LESS 将打印line-height: 35px，如果@include-lineheight 不为true，它将跳过mixin。

【讨论】：

这很好，但是，请注意那些报价。我相信 LESS 逐字逐句地写论据。在您的示例中， 35px 获取的引号写为“35x”。所以 HEX 颜色会被破坏。

【解决方案4】：

我为一些语法糖写了一个 mixin ;)
也许有人比使用 guards

更喜欢这种写 if-then-else 的方式

依赖于 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;
        }
    }
});

【讨论】：

有没有办法测试truth-ness 的值，例如@color: #fff; .if(@color...