CSS预处理器 Less

1 less是什么

less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。
less的中文官网：http://lesscss.cn/ 。
bootstrap中less教程：http://www.bootcss.com/p/lesscss/。

2 Less编译工具

koala 官网：www.koala-app.com 。

3 less中的注释

• 以//开头的注释，不会被编译到css文件中
• 以/**/包裹的注释会被编译到css文件中

4 less中的变量

使用@来申明一个变量：@pink：pink;

1. 作为普通属性值只来使用：直接使用@pink
2. 作为选择器和属性名：#@{selector的值}的形式
3. 作为URL：@{url}
4. 变量的延迟加载

5 less中的嵌套规则

1. 基本嵌套规则
2. &的使用

6 less中的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式：

1. 普通混合
2. 不带输出的混合
3. 带参数的混合
4. 带参数并且有默认值的混合
5. 带多个参数的混合
6. 命名参数
7. 匹配模式
8. arguments变量

7 less运算

在less文件中，任何数字、颜色或变量都能参与运算，就是less提供了+、-、*、/算术的运算。代码如下：

/*是在less文件里写*/
@width:10px + 5;
div {
/*其实就变成了15px的边框*/
	border:@width solid skyblue;
}
/*生成的css文件是这样的*/
div {
	border:15px solid skyblue;
}
/*甚至还以带小括号，比如说下面这种 和数学中的一样，先算小括号再去相乘*/
width:(@width + 5) * 2;
@baseFont:50;

/* 也可以定义一个变量*/
div {
/*就等同于88/50 但要记得需要有其中一个数值带单位*/
/*如果两个数值都没有单位，那的出来的值也没有单位*/
	width:88rem / @baseFont;
}

注意点：

1. 运算符中间左右必须有空格隔开 1px + 5；
2. 对于两个不同单位值之间的运算，运算结果的值会取第一个值的单位 18rem + 5px，单位就是rem，不是px；
3. 如果两个值之间只有一个值有单位，则运算结果就取该单位

8 less避免编译

less里面有一个避免编译，有时候我们需要输出一些不正确的css语法或者使用less不认识的专有语法。要输出这样的值我们可以在字符串前加上一个~。代码如下：

.test_03{
　　width: 300px;
　　height: calc(300px - 30px);
}
=>
.test_03 {
　　width: 300px;
　　height: calc(270px);
}

这里的calc，有时候我们是让浏览器计算，不是让less计算。所以我们采用避免编译。

.test_03{
　　width: 300px;
　　height: ~'calc(300px - 30px)';
}
=>
.test_03 {
　　width: 300px;
　　height: calc(300px - 30px);
}

9 less继承

1. 性能比混合高
2. 灵活度比混合低