经过上一篇 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 所以不会执行,可以通过编译之后的代码查看结果
when 表达式中可以使用比较运算符 (>,<,>=,<=,=)
、逻辑运算符、或内置函数来进行条件判断,如上已经介绍过了比较运算符了,在来看看逻辑运算符,如下
.size(@width, @height) when (@width = 100px), (@height = 100px) {
width: @width;
height: @height;
}
div {
.size(50px, 100px);
background: red;
}
如上代码的含义为,只要宽度或者高度其中一个满足条件即可执行混合中的代码,(), ()
相当于 JS 中的 ||
,()and()
相当于 JS 中的 &&
看完了逻辑运算符紧接着在看内置函数来进行判断,如下
.size(@width,@height) when (ispixel(@width)) {
width: @width;
height: @height;
}
div {
.size(50%, 100px);
background: red;
}
如上代码的含义为,看宽度的单位是否以 px
结尾的,我故意弄了个百分号,所以混合当中的代码不会执行,编译结果如下所示
如有不正确之处,还请大佬指正????