css – 如何在LESS中使用if语句

我正在寻找一些if语句来控制不同的div元素的背景颜色。

我试过下面，但它不编译

@debug: true;

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

article {
  background-color: (red) when (@debug = true);
}

解决方法

LESS对mixins有 guard expressions，而不是个别属性。

所以你会创建一个这样的混合：

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

    article {
      background-color: red;
    }
}

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