如何在LESS中使用if语句

Question

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

我已经尝试了以下内容，但无法编译

@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的保护表达式，而不是单个属性。

因此，您将创建一个像这样的mixin：

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

    article {
      background-color: red;
    }
}

并通过调用.debug(true);或.debug(false)（或完全不调用）将其打开或关闭。