less中的条件判断
原创
经过上一篇 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 所以不会执行，可以通过编译之后的代码查看结果
image-20210811142457170
when 表达式中可以使用比较运算符 (>，<，>=，<=，=)、逻辑运算符、或内置函数来进行条件判断，如上已经介绍过了比较运算符了，在来看看逻辑运算符，如下
.size(@width, @height) when (@width = 100px), (@height = 100px) {
width: @width;
height: @height;
}
div {
.size(50px, 100px);
background: red;
}如上代码的含义为，只要宽度或者高度其中一个满足条件即可执行混合中的代码，(), () 相当于 JS 中的 ||，()and() 相当于 JS 中的 &&
image-20210811152204371
看完了逻辑运算符紧接着在看内置函数来进行判断，如下
.size(@width,@height) when (ispixel(@width)) {
width: @width;
height: @height;
}
div {
.size(50%, 100px);
background: red;
}如上代码的含义为，看宽度的单位是否以 px 结尾的，我故意弄了个百分号，所以混合当中的代码不会执行，编译结果如下所示
image-20210811153522126
如有不正确之处，还请大佬指正🐤
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
暂无评论
腾讯云开发者
