🎅Less 快速学习（下）🎅

作者：空城机

2021 年 11 月 19 日
本文字数：2697 字
阅读完需：约 9 分钟

Less

本文承接上文《Less快速学习（下）》，对 less 进行学习总结。

运算（Operations）

在 less 中，算术运算符可以对任何数字、颜色或变量进行运算，与calc有些类似

思维导图：

单位推断

less 会为你自动推断数值的单位，所以不必每一个值都加上单位，如果是calc不加单位就会失效

例子：

@width: 10 + 5px - 3;.cal {    width: @width;}

复制代码

这里虽然只有 5px 有单位，但是也依旧可以成功转换

.cal {  width: 12px;}

复制代码

注意：运算符与值之间必须以空格分开。如果不隔开，将生成错误的转换结果
@width: 10 +5px -3;
转换结果： width: 10 5px -3;

运算优先级

涉及到优先级计算，应当使用()区分优先级计算，否则将乘除的优先级将会大于加减优先级

颜色值运算

less在运算时，先将颜色值转换为 RGB 模式，然后再转换为 16 进制颜色值并返回

两个十六进制计算：#100001 + #002200 = #102201 如果转换为 10 进制就是：1048577 + 8704 = 1057281

而1057281的十六进制就是102201

接下来来看这个例子：这里生成的结果不是#000001

// 这里的1转换为rgb(1,1,1) 实际上就是#010101color: #000000 + 1;

复制代码

因为 1 其实指的是rgb(1,1,1)，如果是 10 的话，那么也就是rgb(10,10,10)。因为 rgb 不会超过 255，所以如果运算时超过，就会默认为rgb(255,255,255)也就是#ffffff

函数

Less 提供了许多用于转换颜色，处理字符串和进行算术运算的函数，这些函数使用起来非常简单。特别是其中有关于颜色部分的函数。

命名空间（namespace）

出于组织结构或仅仅是为了提供一些封装的目的，你希望对混合（mixins）进行分组。因为之前说过，有作用域的影响，所以不同作用域下的混入会失败，比如下面的例子：

#div1 {    .color {        color: red;    }}
#div2 {    .rect {        .color(); // 找不到color    }}

复制代码

所以可以使用命名空间的方式，来用链式结构去调用你需要混入的元素样式。这里可以使用#div1.color来混入 div1 下的 color 元素

#div1 {    .color {        color: red;    }}
#div2 {    .rect {        #div1.color;    }}

复制代码

转换的结果：

#div1 .color {  color: red;}#div2 .rect {  color: red;}

复制代码

引入（@import）

在less中，可以引入一个或多个.less 文件，然后这个文件中所有变量可以在当前 less 项目中使用。这一点与 css 中引入其实是类似的。

引入的命令是@import

并且可以携带参数，使用方式@import (参数1, 参数2) 文件地址

条件表达式

在 less 专门为混合定义了条件判断语法，使用 when 关键字进行判断，只有当条件满足时执行括号中的代码。

思维导图：

when 关键字

比如下面就是对设定的变量 width 进行宽度判断的方法，如果宽度超过 100px 设置为 100px，否则使用传入的参数值

@width: 110px;// 宽度判断setwidth.setwidth (@w) when ( @w > 100px ){    width: 100px;}.setwidth (@w) when ( @w <=100px ){    width: @w;}.class1 {    .setwidth(@width);}

复制代码

转换后 CSS：

.class1 {  width: 100px;}

复制代码

并或非

在条件表达式判断时，还可以使用并或非进行多条件判断。

实例：

// 如果参数1为5px并且参数2为10才成立.fn1(@arg1, @arg2) when(@arg1 = 5) and (@arg2 = 10) {    width: 10px;    height: 10px;}// 参数1大于5或者参数2大于等于10即可成立.fn2(@arg1, @arg2) when(@arg1 > 5) , (@arg2 >= 10) {    width: 10px;    height: 10px;}// 除了参数1大于5的情况都可以成立.fn3(@arg1, @arg2 : 10) when not (@arg1 > 5) {    width: 10px;    height: @arg2;}
.a {    .fn1(5, 10);}.b {    .fn2(1, 10);}.c {    .fn3(1);}

复制代码

转换的 CSS 代码：

.a {  width: 10px;  height: 10px;}.b {  width: 10px;  height: 10px;}.c {  width: 10px;  height: 10;}

复制代码

乍一看好像使用条件表达式的 less 非常复杂，但是写完表达式后的可复用性就很高了，对于需要条件多的 css 样式就能起到节约代码并整理结构的效果了

类型检查函数

在less当中，还存在类型检查函数，检查是否符合类型，可以据此配合条件判断进行使用

iscolor: 值是颜色，则返回 true，否则返回 false
isnumber: 判断值是否是数值
isstring: 判断值是否是字符串
iskeyword: 判断值是否关键字
isurl: 判断值是否是 url

类型检查函数

检查一个值除了数字外是否有一个特定的单位

ispixel: 判断是否存在像素单位
ispercentage: 判断是否存在百分比
isem: 判断是否存在 em 单位
isunit：判断是否存在指定类型

循环（Loop）

在less中，混合可以调用它自身，这一点就很类似于JavaScript当中的递归调用了，当一个混合递归调用自己，再结合条件表达式和模式匹配这两个特性，就可以写出循环结构。

递归

实例：塑造一个循环 css，创造 ul 下的 10 个 li，并且 li 的宽度逐步增大

// 递归函数定义.loopfn(@count) when(@count > 0) {    .loopfn((@count - 1)); // 递归调用自身    .li:nth-child(@{count}) {        width: 10px * @count;    }}// 函数调用.ul {    .loopfn(10);}

复制代码

转换的 CSS 代码：

.ul .li:nth-child(1) {  width: 10px;}.ul .li:nth-child(2) {  width: 20px;}.ul .li:nth-child(3) {  width: 30px;}.ul .li:nth-child(4) {  width: 40px;}.ul .li:nth-child(5) {  width: 50px;}.ul .li:nth-child(6) {  width: 60px;}.ul .li:nth-child(7) {  width: 70px;}.ul .li:nth-child(8) {  width: 80px;}.ul .li:nth-child(9) {  width: 90px;}.ul .li:nth-child(10) {  width: 100px;}

复制代码

each 函数

在less中，其实还有一个each函数也可以做到循环。它的功能是将规则集的计算绑定到列表的每个成员

使用方式：each(变量, { ... })，其中 @value 可以代表变量列表的值，@key 可以代表变量列表的 key 值。

实例：

@colorList: {    1: blue;    2: red;    3: yellow;    4: green;}
each(@colorList, {    .set@{value} {        color: @value;    }});

复制代码

转换的 CSS 代码：

.setblue {  color: blue;}.setred {  color: red;}.setyellow {  color: yellow;}.setgreen {  color: green;}

复制代码

映射（Maps）

在之前说过，less可以通过命名空间来找到需要使用的混入，这一点很像JavaScript.

这里的映射是将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。此方式很像 JavaScript 中的数组。

实例：

#father {    width: 100px;    height: 70px;    color: #f00;}
.son1 {    width: #father[width];  // 类似于JS数组引用}.son2 {    height: #father[height];    color: #father[color];}

复制代码

转换的 CSS 代码：

#father {  width: 100px;  height: 70px;  color: #f00;}.son1 {  width: 100px;}.son2 {  height: 70px;  color: #f00;}

复制代码

发布于: 2 小时前阅读数: 5

原文链接:【http://xie.infoq.cn/article/81a66299741df639f568f3e74】。

空城机

关注

曾经沧海难为水,只是当时已惘然 2021.03.22 加入

业余作者，在线水文主要干前端的活，业余会学学python 欢迎各位关注，互相学习，互相进步

发布

暂无评论

创作场景

🎅Less 快速学习（下）🎅

Less

运算（Operations）

单位推断

运算优先级

颜色值运算

函数

命名空间（namespace）

引入（@import）

条件表达式

when 关键字

并或非

类型检查函数

类型检查函数

循环（Loop）

递归

each 函数

映射（Maps）

空城机

评论