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) 实际上就是#010101
color: #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) 文件地址

参数	作用
once	文件只会被导入一次，后续的导入相同文件的语句会被忽略 (默认)
reference	使用该less文件但是不输出它， 比如在引入文件中定义.a样式，但是在生成的css中不会输出.a了
less	无论扩展名是什么，都视为less文件
inline	包括在源文件中输出，但是不作处理

---

条件表达式

在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;
}

并或非

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

关键字	作用
and	并运算，相当于JS中的&&
,	或运算，相当于JS中的||
not	非运算，除此之外的条件

实例：

// 如果参数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;
}