less - 如何在 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

有一种方法可以为单个（或多个）属性使用守卫。

@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

LESS 有mixins 的保护表达式，而不是单个属性。

所以你会像这样创建一个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 不为true，它将跳过mixin。

Answer 4

I wrote a mixin for some syntactic sugar ;)
Maybe someone likes this way of writing if-then-else better than using guards

depends on Less 1.7.0

https://github.com/pixelass/more-or-less/blob/master/less/fn/_if.less

Usage:

.if(isnumber(2), {
    .-then(){
        log {
            isnumber: true;
        }
    }
    .-else(){
        log {
            isnumber: false;
        }
    }
});

.if(lightness(#fff) gt (20% * 2), {
    .-then(){
        log {
            is-light: true;
        }
    }
});

using on example from above

.if(@debug, {
    .-then(){
        header {
            background-color: yellow;
            #title {
                background-color: orange;
            }
        }
        article {
            background-color: red;
        }
    }
});