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

有一种方法可以将保护用于个人（或多个）属性。

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

Answer 2

对于mixins而言，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)（或根本不调用它）打开或关闭它。

Answer 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不为真，它将跳过mixin。

Answer 4

我为一些语法糖写了一个mixin;）
也许有人喜欢这种写作方式，然后比使用警卫

更好

取决于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;
        }
    }
});

如何在LESS中使用if语句

4 个答案:

用法：