LESS 学习指南第 4 阶段 [高级] | 条件语句和循环语句
这是我参与8月更文挑战的第7天,活动详情查看:8月更文挑战
LESS是一个CSS预处理器,它在 CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本。这个系列主要就是学习并且巩固 Less 的基础知识,并且掌握一些更加高级的用法,用以提高开发效率。
前期回顾
less学习指南第一期 | 嵌套和变量
less学习指南第二期 | 运算和内置函数
less学习指南第三期【重要】 | 混合和继承
条件表达式
when关键字(if)(v1.5.0)
条件表达式:就是我们在less中使用【比较运算符】或者【表达式的判断】来输入我们的值,根据不同的条件来输出不同的值。
用来模拟if
使用比较运算符
比较运算符(共5种):
- 大于
>
- 小于
<
- 等于
=
- 大于等于
>=
- 小于等于
=<
注:(=)可用来比较【数字】,【字符串】、【标识符】等;其他的只能和【数字】一起使用;
示例:
假如有这样一个需求:需要给标题设置不同颜色,要求主标题统一【黑色】、副标题统一【灰色】,已知主标题字号至少为20px;
代码实现
使用检查函数
1)类型检查函数
可以基于值得类型来匹配函数
基本的类型检查函数有 Iscolor(是否为颜色值) Isnumber(是否为数字) isstring(是否为字符) iskeyword(是否为关键字) isurl(是否为url)
这些检查函数是????less的内置函数
如以下判断
- 如果传参是【字符串】,则背景是【黑色】;
- 如果参数是【数字】,则背景是【白色】;
2)单位检查函数
检查一个值是否是一个特定的单位
基本的单位检查函数 ispixel(是否为像素单位)、ispercentage(是否为百分比)、isem(是否为em单位)、isunit(是否为单位)
这些函数是????less的内置函数
如以下判断:
- 如果单位是【px】,则背景是【黑色】
- 如果单位是【%】,则背景是【白色】
逻辑运算符
-
(),() 相当 于JS中的 ||
,只要有一个符合条件就会执行
如以下示例:当执行 .size的时候传入的第一个参数是100px【或者】第二个参数是100px才会执行
.size(@width,@height) when (@width = 100px),(@height = 100px){}
-
()and() 相当于 JS中的 &&
,必须条件全部符合才会执行
如以下示例:当执行 .size的时候传入的第一个参数是100px【并且】第二个参数是100px才会执行
.size(@width,@height) when (@width = 100px) and (@height = 100px){}
-
not 运算符 相当于 非运算 !
,条件为 不符合才会执行
如以下示例:传给size的@width不为100px的都执行了;
变量和混合结合
利用变量和混合结合,可以实现对【多个样式类】进行【条件判断】;
如以下示例:设置了变量 @variable
,混合.demo()
里的两个类根据判断,最好只把符合条件style2
编译了出来
如果不知道为什么最后@variable取的是b,则去回顾一下????【第一期—变量—变量的Lazy Evaluation和作用域】
default函数(else)
default() 函数可根据已创建的 Mixins 条件来形成该条件的补集。
可用于模拟else
如以下示例:default()等价于 @width <= 10%
.size(@width) when (@width > 10%){color:red;}
.size(@width) when (default()){color:#333333;}
if关键字(v3.0.0)
在v3.0.0版本之前,less一直是用when来实现条件判断的。if关键字【发布于】v3.0.0 【更新于】v3.6.0
根据条件返回两个值中的一个。
Parameters:
-
condition
:布尔表达式 -
value1
:如果condition
为true,则返回一个值。 -
value2
:如果condition
不为真,则返回一个值。
注意:支持作为 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);
}
注:在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%
循环语句
在其他的编程语言中我们都是通过 for 循环的结构去实现的循环结构。
但是在 Less 中并没有这么一种语法,而是通过【自身调用】从而实现的【循环递归】。
同时我们需要运用之前我们学习到的【条件判断】从而【跳出循环】。
递归调用自己
简单示例
.w(@counter) when (@counter > 0){
//递归调用自身
.w((@counter - 1));
//每次调用时产生的样式代码
width:(10px * @counter);
}
div{
/*调用循环*/
.w(5);
}
实用示例:利用递归循环创建一个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时,停止执行
实用示例2:可以设置一些css的预设值,如设置一些padding(可以按上面的思路自行分析一下)
使用 range
和 each
创建一个 for
循环(v3.9.0)
至少需要Less v3.9.0
你可以简单地通过生成数字列表并使用 each
数字列表将其扩展为规则集来模拟 for
循环
each(range(4), {
.col-@{value} {
height: (@value * 50px);
}
});
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;
});
}
批量设置class名称
@selectors: div, span, p;
each(@selectors, {
.sel-@{value} {
background: #cccccc;
}
});
批量设置font-size
/** 定义需要遍历的对象 */
@List: {
4: 4px;
5: 5px;
8: 8px;
10: 10px;
12: 12px;
}
each(@List, {
.fs-@{key} {
font-size: @value;
}
});
批量设置color
@colors: {
info: #eee;
danger: #f00;
}
each(@colors, {
.text-@{key}{
color: @value;
}
});
在 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;
}
});
range(v3.9.0)
生成一个跨越一系列数值的列表。
Parameters
-
start
-(可选)起始值,例如1或1px -
end
-端值例如5像素 -
step
-(可选)要增加的数量
示例:此示例只是为了把值打印出来看一下,无任何实际意义
范围内每个值的输出将与 end
值使用相同的单位
结语
下期预告:less学习指南第五期 | *****
参考:
less官网
less default
less if
less booleane
less each
less range
????♀️????♀️????♀️点赞召唤下一期!????♀️????♀️????♀️
推荐阅读
-
在前向传播和定向传播阶段,Dropout 为什么能防止过度拟合,Dropout 和 BN 有什么区别?
-
OpenCV 高级图形用户界面 (21) 暂停程序执行并等待用户按键进入,使用函数 waitKey - 参数
-
TensorFlow 的基本概念和使用场景
-
桥接模式的解释和代码实现
-
vue 通过元素用户界面的 el-date-picker 报告页眉时间,其中包括开始时间和结束时间
-
[C 语言教程] [嵌入式程序设计] (I) 简介和先决条件 (II) 嵌入式程序设计基础 (III) 硬件基础 (IV) 硬件寄存器操作
-
C++ 中的抽象类和抽象方法
-
元素将时间和日期框设置为早于当前时间和日期,以禁用
-
C++ 类和对象 - 通过 4 级考试
-
Vue.js 组件开发:从基础到高级功能