经过上一篇 ​​less中的继承​​ 的讲解之后，本章节开展的内容为 less 中的条件判断，less 中可以通过 ​​when​​ 给混合添加执行限定条件，只有条件满足 (为真) 才会执行混合中的代码，首先想要看这个条件判断首先需要有混合才可以，混合代码如下

.size(@width, @height) {
  width: @width;
  height: @height;
}

div {
  .size(100px, 100px);
  background: red;
}

转换之后的代码呢，如下

div {
  width: 100px;
  height: 100px;
  background: red;
}

现在有了混合，我们就可以通过混合来看看条件限定了，通过如上所说通过 ​​when​​ 来进行限定那么如何编写呢，在混合的小括号后面写 when 然后在编写一个小括号，在该小括号当中编写限定条件即可如下

.size(@width, @height) when (@width = 100px) {
  width: @width;
  height: @height;
}

div {
  .size(50px, 100px);
  background: red;
}

如上代码的含义为当宽度等于 ​​100​​ 才会执行该混合当中的代码，我故意给了个 50 所以不会执行，可以通过编译之后的代码查看结果

less中的条件判断_条件判断

when 表达式中可以使用比较运算符 ​​(>，<，>=，<=，=)​​、逻辑运算符、或内置函数来进行条件判断，如上已经介绍过了比较运算符了，在来看看逻辑运算符，如下

.size(@width, @height) when (@width = 100px), (@height = 100px) {
  width: @width;
  height: @height;
}

div {
  .size(50px, 100px);
  background: red;
}

如上代码的含义为，只要宽度或者高度其中一个满足条件即可执行混合中的代码，​​(), ()​​​ 相当于 JS 中的 ​​||​​​，​​()and()​​​ 相当于 JS 中的 ​​&&​​

less中的条件判断_条件判断_02

看完了逻辑运算符紧接着在看内置函数来进行判断，如下

.size(@width,@height) when (ispixel(@width)) {
  width: @width;
  height: @height;
}

div {
  .size(50%, 100px);
  background: red;
}

如上代码的含义为，看宽度的单位是否以 ​​px​​ 结尾的，我故意弄了个百分号，所以混合当中的代码不会执行，编译结果如下所示

less中的条件判断_比较运算符_03

如有不正确之处，还请大佬指正????