如何在LESS中使用if语句 [英] How to use if statements in LESS

问题描述

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

I'm looking for some kind of if-statement to control the background-color of different div elements.

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

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

推荐答案

LESS has 保护表达式用于混合宏，而不是单个属性。

LESS has guard expressions for mixins, not individual attributes.

d创建一个这样的混合：

So you'd create a mixin like this:

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

    article {
      background-color: red;
    }
}

并通过调用 .debug（true）; 或 .debug（false）（或根本不调用它）。

And turn it on or off by calling .debug(true); or .debug(false) (or not calling it at all).

这篇关于如何在LESS中使用if语句的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！