--- theme: condensed-night-purple --- 这是我参与8月更文挑战的第7天，活动详情查看：[8月更文挑战](https://juejin.cn/post/6987962113788493831) LESS是一个CSS预处理器，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本。这个系列主要就是学习并且巩固 Less 的基础知识，并且掌握一些更加高级的用法，用以提高开发效率。 **前期回顾** [less学习指南第一期 | 嵌套和变量](https://juejin.cn/post/6992236237922762759)
[less学习指南第二期 | 运算和内置函数](https://juejin.cn/post/6992615241037119525)
[less学习指南第三期【重要】 | 混合和继承](https://juejin.cn/post/6993332511149391908)
# 条件表达式
## when关键字(if)（v1.5.0）条件表达式：就是我们在less中使用【比较运算符】或者【表达式的判断】来输入我们的值，根据不同的条件来输出不同的值。 `用来模拟if` ### 使用比较运算符比较运算符（共5种）： - 大于`> ` - 小于`< ` - 等于`=` - 大于等于`>=` - 小于等于`=<` >注：（=）可用来比较【数字】，【字符串】、【标识符】等；其他的只能和【数字】一起使用； **示例：** 假如有这样一个需求：需要给标题设置不同颜色，要求主标题统一【黑色】、副标题统一【灰色】，已知主标题字号至少为20px； `代码实现` ![image-20210807184337323](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/378098806c614752a7504e8f15a36b08~tplv-k3u1fbpfcp-zoom-1.image) ### 使用检查函数 `1）类型检查函数` 可以基于值得类型来匹配函数基本的类型检查函数有 `Iscolor(是否为颜色值) Isnumber(是否为数字) isstring(是否为字符) iskeyword(是否为关键字) isurl(是否为url)` > 这些检查函数是👉[less的内置函数](https://less.bootcss.com/functions/#type-functions) 如以下判断 - 如果传参是【字符串】，则背景是【黑色】； - 如果参数是【数字】，则背景是【白色】； ![image-20210807195347555](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1a4d85736074233ad9b6e3ab6c23472~tplv-k3u1fbpfcp-zoom-1.image) `2）单位检查函数` 检查一个值是否是一个特定的单位基本的单位检查函数 `ispixel（是否为像素单位）、ispercentage（是否为百分比）、isem（是否为em单位）、isunit（是否为单位）` > 这些函数是👉[less的内置函数](https://less.bootcss.com/functions/#type-functions) 如以下判断： - 如果单位是【px】，则背景是【黑色】 - 如果单位是【%】，则背景是【白色】 ![image-20210807203047595](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/73d90364c3b34a9d84f934b8338c8a0c~tplv-k3u1fbpfcp-zoom-1.image) ### 逻辑运算符 - `(),() 相当于JS中的 ||` ，只要有一个符合条件就会执行 **如以下示例**：当执行 .size的时候传入的第一个参数是100px【或者】第二个参数是100px才会执行 ``` .size(@width,@height) when (@width = 100px),(@height = 100px){} ``` ![image-20210807205001615](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ac5006ba8925499d808ef4e177947f64~tplv-k3u1fbpfcp-zoom-1.image) - `()and() 相当于 JS中的 &&`，必须条件全部符合才会执行 **如以下示例**：当执行 .size的时候传入的第一个参数是100px【并且】第二个参数是100px才会执行 ``` .size(@width,@height) when (@width = 100px) and (@height = 100px){} ``` ![image-20210807205224394](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/35b7a7b2e1a94794a06e893d816adc37~tplv-k3u1fbpfcp-zoom-1.image) - `not 运算符相当于非运算 !`，条件为不符合才会执行 **如以下示例**：传给size的@width不为100px的都执行了； ![image-20210807212843636](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/85b12942279443e7a1747cef5104d43c~tplv-k3u1fbpfcp-zoom-1.image) ### 变量和混合结合利用变量和混合结合，可以实现对【多个样式类】进行【条件判断】； **如以下示例**：设置了变量 `@variable`，混合`.demo()`里的两个类根据判断，最好只把符合条件`style2`编译了出来 > 如果不知道为什么最后@variable取的是b，则去回顾一下👉[【第一期—变量—变量的Lazy Evaluation和作用域】](https://juejin.cn/post/6992236237922762759) ![image-20210807211131069](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c5e9a0004d904281be5ff52b7bfa5719~tplv-k3u1fbpfcp-zoom-1.image) ### default函数(else) default() 函数可根据已创建的 Mixins 条件来形成该条件的补集。 `可用于模拟else` **如以下示例**：default()等价于 @width <= 10% ``` .size(@width) when (@width > 10%){color:red;} .size(@width) when (default()){color:#333333;} ``` ![image-20210807212819405](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ffbbde311a4745d8ae38dda11ebed8ec~tplv-k3u1fbpfcp-zoom-1.image) ## if关键字（v3.0.0） > 在v3.0.0版本之前，less一直是用when来实现条件判断的。if关键字【发布于】v3.0.0 【更新于】v3.6.0 根据条件返回两个值中的一个。 Parameters: - `condition` ：布尔表达式 - `value1` ：如果 `condition` 为true，则返回一个值。 - `value2` ：如果 `condition` 不为真，则返回一个值。 ![image-20210807214311292](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/654cfd9a98a24b8d85aa491cdbb8ad96~tplv-k3u1fbpfcp-zoom-1.image) 注意：支持作为 `conditional` 参数的布尔表达式与`Guard Statements`相同。 ``` div { margin: if(not (true), 30px, 10px); color: if((true) and (2 > 1), red, black); background:if((false) or (isstring("boo!")), red, black); } ``` ![image-20210807214615269](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9a991080c8fc465c8409b54d5f104c45~tplv-k3u1fbpfcp-zoom-1.image) 注:在3.6版本之前，该条件需要一组括号，否则会报错。 ``` if(2 > 1, blue, green); // Causes an error in 3.0-3.5.3 if((2 > 1), blue, green); // Ok 3.0+ ``` ## boolean关键字（v3.0.0） >【发布于】v3.0.0 【更新于】v3.6.0 `评价为真或假` 您可以将一个布尔表达式存在变量，以供以后在Guard或 `if()` 中进行判断。 Parameters: - `condition` ：布尔表达式 ```less @bg: rgb(10, 200, 30); @bg-light: boolean(luma(@bg) > 50%); div { background: @bg; color: if(@bg-light, black, white); } ``` > luma从颜色值中提取亮度的百分比(@color)，返回值：百分比 0-100% ![image-20210807215517386](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b9c483909f724ae28d5494689aa09a0c~tplv-k3u1fbpfcp-zoom-1.image) # 循环语句在其他的编程语言中我们都是通过 for 循环的结构去实现的循环结构。但是在 Less 中并没有这么一种语法，而是通过【自身调用】从而实现的【循环递归】。同时我们需要运用之前我们学习到的【条件判断】从而【跳出循环】。 ## 递归调用自己 **简单示例** ``` .w(@counter) when (@counter > 0){ //递归调用自身 .w((@counter - 1)); //每次调用时产生的样式代码 width:(10px * @counter); } div{ /*调用循环*/ .w(5); } ``` ![image-20210807220605511](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cdba702b8486481e9e3898a73b4005a1~tplv-k3u1fbpfcp-zoom-1.image) **实用示例**：利用递归循环创建一个CSS网格; ``` .loop-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} { width: (@i * 100% / @n); } .loop-columns(@n, (@i + 1)); } .loop-columns(4); ``` **示例分析** - 混合loop-columns设了两个参数@n，@i。并且给@i设置了默认值1 - 第一次执行，只传了一个参数4，则@n=4，@i=默认值1 - 在自身调用自己，让@i自增 - 通过when判断，当@i<=@n时，停止执行 ![image-20210807221005839](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1bd2a34b30394302824e946bceaedc8e~tplv-k3u1fbpfcp-zoom-1.image) **实用示例2**：可以设置一些css的预设值，如设置一些padding（可以按上面的思路自行分析一下） ![image-20210807221940794](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dd49750fe8ae4bbca943de2e347973ba~tplv-k3u1fbpfcp-zoom-1.image) ## 使用 `range` 和 `each` 创建一个 `for` 循环(v3.9.0) > 至少需要Less v3.9.0 你可以简单地通过生成数字列表并使用 `each` 数字列表将其扩展为规则集来模拟 `for` 循环 ``` each(range(4), { .col-@{value} { height: (@value * 50px); } }); ``` ![image-20210807222327444](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d491fd6b60b84303a6cf2d4e2dd4c85a~tplv-k3u1fbpfcp-zoom-1.image) # each(v3.7.0) 将规则集的值绑定到列表的每个成员。 **Parameters** - `list` -用逗号或空格分隔的值列表。 - `rules` -匿名规则集/混合每个列表成员可以被默认绑定`@value`, `@key`, `@index`三个变量，对大部分的列表而言， `@key`和 `@index`会被定义为相同的值（比如以1开始的有序列表）。然而，你也可以使用规则自定义列表中的`@key`值。 ## 官网示例 ``` @set: { one: blue; two: green; three: red; } .set { each(@set, { @{key}-@{index}: @value; }); } ``` ![image-20210807223225325](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b066f584e57c4be7bd3696bad356153c~tplv-k3u1fbpfcp-zoom-1.image) ## 批量设置class名称 ``` @selectors: div, span, p; each(@selectors, { .sel-@{value} { background: #cccccc; } }); ``` ![image-20210807222822883](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c40a13a6c372470face4f1a4d5ddb064~tplv-k3u1fbpfcp-zoom-1.image) ## 批量设置font-size ``` /** 定义需要遍历的对象 */ @List: { 4: 4px; 5: 5px; 8: 8px; 10: 10px; 12: 12px; } each(@List, { .fs-@{key} { font-size: @value; } }); ``` ![image-20210807224604905](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/39706b3397bf4b8ea6d3f2f0bdbc9d0d~tplv-k3u1fbpfcp-zoom-1.image) ## 批量设置color ``` @colors: { info: #eee; danger: #f00; } each(@colors, { .text-@{key}{ color: @value; } }); ``` ![image-20210807224013542](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a7c3207403e744ab804b85d371bf5cb8~tplv-k3u1fbpfcp-zoom-1.image) ## 在 `each()` 中设置变量名称在每个`each()`函数中你不必都使用`@value`, `@key`, `@index`作为变量名。在Less 3.7版本中，Less通过 `each()` 函数引入了匿名混入的概念，该混入可能会在以后扩展到语法的其他部分。 > 匿名混入使用 `#()` 或 `.()` 的形式（以开头） `.` 或 `#` 就像常规的mixin一样 > `each()`函数会获取不定参数中的变量的名字并按顺序把它们赋给到`@value`、`@key`、`@index`的value值。如果你只是写了`each(@list, .(@value){})`,则`@key`和`@index`都会变成未定义 ``` @colors: { info: #eee; danger: #f00; } each(@colors,.(@v,@k,@i) { .text-@{k}{ color: @v; } }); ``` ![image-20210807224335547](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/37c221482a384d52aca823286dc4074e~tplv-k3u1fbpfcp-zoom-1.image) # range(v3.9.0) 生成一个跨越一系列数值的列表。 **Parameters** - `start` -（可选）起始值，*例如1或1px* - `end` -端值*例如5像素* - `step` -（可选）要增加的数量示例：此示例只是为了把值打印出来看一下，无任何实际意义 ![image-20210807230119535](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f65c10141d634a508fe088c18c5ce152~tplv-k3u1fbpfcp-zoom-1.image) 范围内每个值的输出将与 `end` 值使用相同的单位 ![image-20210807230330093](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d237ceb8c6a84c6d913bbccd01207b09~tplv-k3u1fbpfcp-zoom-1.image) # 结语下期预告：less学习指南第五期 | ***** 参考：
[less官网](https://lesscss.org/)
[less default](https://less.bootcss.com/functions/#misc-functions-default)
[less if](https://less.bootcss.com/functions/#logical-functions-if)
[less booleane](https://less.bootcss.com/functions/#logical-functions-boolean)
[less each](https://less.bootcss.com/functions/#list-functions-each)
[less range](https://less.bootcss.com/functions/#list-functions-range)
********************* 🏃‍♀️🏃‍♀️🏃‍♀️点赞召唤下一期！🏃‍♀️🏃‍♀️🏃‍♀️