less的逻辑函数有两个：if 函数 和 boolean函数，后者可以给前者提供判断。

if 函数

根据判断条件返回两个值中的一个。类似三元运算符。
if 函数的语法规范： if(condition, value1, value2)

参数取值

  • condition：逻辑表达式，可以是（>, <, ==等判断符）或者是其他可以返回布尔值的函数，比如boolean、iscolor等函数
  • value1：当逻辑表达式为真时，返回value1
  • value2：当逻辑表达式为假时，返回value2

    实例

    ```less @some: foo;

div { margin: if((2 > 1), 0, 3px); //因为2大于1为真，所以返回值为0 color: if((iscolor(@some)), @some, black); /iscolor判断一个值是否为颜色参数，这里foo不是颜色，为假，所以返回black/ }

  1. 编译为：
  2. ```less
  3. div {
  4.     margin: 0;
  5.     color:  black;
  6. }

逻辑表达式连接符（and、or、not）

如果你有多个条件想一起判断，或者想要将结果取反，其语法和媒体查询一样：

  • and：连接多个逻辑表达式，同 “且”
  • or：连接多个逻辑表达式，同 “或”
  • not：将后面的逻辑返回值取反，同“非”

    真值与假值

    你也可以用关键字 true 和 false 来指定返回值为真或者假
    @color: red
#app when(if(@color=red,true,false)){
 color: @color
}

其他注意点

在less 3.6版本之前，所有的逻辑表达式都需要用小括号括起来：

if(2 > 1, blue, green);   // 在3.0-3.5.3版本之间是错误的，无法编译
if((2 > 1), blue, green); // 3.6版本之前，必须加小括号

boolean 函数

顾名思义就是判断一个表达式的结果是否为真或假，可以配合 if 函数或者命名空间守卫使用
你可以用一个变量接受返回值，然后在后续需要进行判断的时候使用它。
语法规范：boolean(逻辑表达式)

实例

@bg: black;
@bg-light: boolean(@bg = black);

div {
  background: @bg; 
  color: if(@bg-light, black, white);
}

编译为：

div {
  background: black;
  color: black;
}

when()函数

其实这个并不算是函数，这是在混入时，用来给命名空间加上条件限制的，但是由于其语法和逻辑函数一摸一样，这里就在复习一下：

对于mixin混入

你可以通过when将混入类进行类型判断，当传入参数不同时，可以实现不同的样式体：

.mixin(@value) when (ispixel(@value)) {width: @value}
.mixin(@value) when not(default())    {padding: (@value / 5)}

div-1 {
  .mixin(100px);
}

div-2 {
  /* ... */
  .mixin(100%);
}

你可以通过 when 关键字来定义守护规则。只有当变量的值正确时，这个命名空间的混入才会生效：

@mode;
#namespace when (@mode = huge) {
  .mixin() { /* */ }
}

#namespace {
  .mixin() when (@mode = huge) { /* */ }
}

同时，你也可以用逻辑判断关键字（and、or、not）来连接多个表达式或者将其取反。和逻辑函数的语法一摸一样。
不过注意！当有多个条件时，需要用一个小括号将所有条件都括在一起。

// 命名空间守护，要求参数必须是规定的值时，才会生效
//当有多个表达式时，需要用小括号括住，像这样：when(/*表达式*/)
#namespace when (not(@mode = huge) and (@mode) or not(@mode = small)) {
  .mixin() {
    /* */
  }
}