less学习指南第四期【进阶】| 条件语句和循环语句

Axjy
VIP.5 如鱼得水
5,269 阅读6分钟

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

LESS是一个CSS预处理器，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本。这个系列主要就是学习并且巩固 Less 的基础知识，并且掌握一些更加高级的用法，用以提高开发效率。

前期回顾

less学习指南第一期 | 嵌套和变量
less学习指南第二期 | 运算和内置函数
less学习指南第三期【重要】 | 混合和继承

条件表达式


when关键字(if)（v1.5.0）

条件表达式：就是我们在less中使用【比较运算符】或者【表达式的判断】来输入我们的值，根据不同的条件来输出不同的值。

用来模拟if

使用比较运算符

比较运算符（共5种）：

  • 大于>
  • 小于<
  • 等于=
  • 大于等于>=
  • 小于等于=<

注：（=）可用来比较【数字】，【字符串】、【标识符】等；其他的只能和【数字】一起使用；

示例：

假如有这样一个需求：需要给标题设置不同颜色，要求主标题统一【黑色】、副标题统一【灰色】，已知主标题字号至少为20px；

代码实现

image-20210807184337323

使用检查函数

1）类型检查函数

可以基于值得类型来匹配函数

基本的类型检查函数有 Iscolor(是否为颜色值) Isnumber(是否为数字) isstring(是否为字符) iskeyword(是否为关键字) isurl(是否为url)

这些检查函数是👉less的内置函数

如以下判断

  • 如果传参是【字符串】，则背景是【黑色】；
  • 如果参数是【数字】，则背景是【白色】；

image-20210807195347555

2）单位检查函数

检查一个值是否是一个特定的单位

基本的单位检查函数 ispixel（是否为像素单位）、ispercentage（是否为百分比）、isem（是否为em单位）、isunit（是否为单位）

这些函数是👉less的内置函数

如以下判断：

  • 如果单位是【px】，则背景是【黑色】
  • 如果单位是【%】，则背景是【白色】

image-20210807203047595

逻辑运算符

  • (),() 相当 于JS中的 || ，只要有一个符合条件就会执行

如以下示例：当执行 .size的时候传入的第一个参数是100px【或者】第二个参数是100px才会执行

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

image-20210807205001615

  • ()and() 相当于 JS中的 &&，必须条件全部符合才会执行

如以下示例：当执行 .size的时候传入的第一个参数是100px【并且】第二个参数是100px才会执行

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

image-20210807205224394

  • not 运算符 相当于 非运算 !，条件为 不符合才会执行

如以下示例：传给size的@width不为100px的都执行了；

image-20210807212843636

变量和混合结合

利用变量和混合结合，可以实现对【多个样式类】进行【条件判断】；

如以下示例：设置了变量 @variable，混合.demo()里的两个类根据判断，最好只把符合条件style2编译了出来

如果不知道为什么最后@variable取的是b，则去回顾一下👉【第一期—变量—变量的Lazy Evaluation和作用域】

image-20210807211131069

default函数(else)

default() 函数可根据已创建的 Mixins 条件来形成该条件的补集。

可用于模拟else

如以下示例：default()等价于 @width <= 10%

.size(@width) when (@width > 10%){color:red;}
.size(@width) when (default()){color:#333333;}

image-20210807212819405

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

注意：支持作为 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

注:在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 ：布尔表达式
@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

循环语句

在其他的编程语言中我们都是通过 for 循环的结构去实现的循环结构。

但是在 Less 中并没有这么一种语法，而是通过【自身调用】从而实现的【循环递归】。

同时我们需要运用之前我们学习到的【条件判断】从而【跳出循环】。

递归调用自己

简单示例

.w(@counter) when (@counter > 0){
    //递归调用自身
	.w((@counter - 1)); 
     //每次调用时产生的样式代码
	width:(10px * @counter);
}

div{
     /*调用循环*/
	.w(5);
}

image-20210807220605511

实用示例：利用递归循环创建一个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

实用示例2：可以设置一些css的预设值，如设置一些padding（可以按上面的思路自行分析一下）

image-20210807221940794

使用 range 和 each 创建一个 for 循环(v3.9.0)

至少需要Less v3.9.0

你可以简单地通过生成数字列表并使用 each 数字列表将其扩展为规则集来模拟 for 循环

each(range(4), {
  .col-@{value} {
    height: (@value * 50px);
  }
});

image-20210807222327444

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

批量设置class名称

@selectors: div, span, p;

each(@selectors, {
  .sel-@{value} {
    background: #cccccc;
  }
});

image-20210807222822883

批量设置font-size

/** 定义需要遍历的对象 */
@List: {
    4: 4px;
    5: 5px;
    8: 8px;
    10: 10px;
    12: 12px;
}
each(@List, {
    .fs-@{key} {
        font-size: @value;
    }
});

image-20210807224604905

批量设置color

@colors: {
  info: #eee;
  danger: #f00;
}

each(@colors, {
   .text-@{key}{
        color: @value;
  }
});

image-20210807224013542

在 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

range(v3.9.0)

生成一个跨越一系列数值的列表。

Parameters

  • start -（可选）起始值，例如1或1px
  • end -端值例如5像素
  • step -（可选）要增加的数量

示例：此示例只是为了把值打印出来看一下，无任何实际意义

image-20210807230119535

范围内每个值的输出将与 end 值使用相同的单位

image-20210807230330093

结语

下期预告：less学习指南第五期 | *****

参考：
less官网
less default
less if
less booleane
less each
less range

🏃‍♀️🏃‍♀️🏃‍♀️点赞召唤下一期！🏃‍♀️🏃‍♀️🏃‍♀️

avatar
文章
阅读
粉丝
相关推荐
（09）CSS 给盒子、背景、链接、列表、表单、表格等加样式 | CSS
3.4k阅读
 · 
19点赞
学习 sass 笔记
1.5k阅读
 · 
37点赞
Vue+axios请求本地json
8.9k阅读
 · 
4点赞
vue+element-ui实现anchor组件
47阅读
 · 
0点赞
不同预处理器less、scss等下如何写样式穿透
4.5k阅读
 · 
23点赞
React中使用Redux实现高德地图AMap地图实例的缓存和复用
227阅读
 · 
4点赞
使用纯CSS的自定义选择样式（详细指南）
4.9k阅读
 · 
6点赞
Element UI 使用 table 组件设置 el-table-column 宽度width为百分比无效的问题解决方案
4.1k阅读
 · 
1点赞
浏览器历史记录整理
1.1k阅读
 · 
4点赞

友情链接：