CSS预处理器：定义了一种新的语言，其基本思想是，用一种专门的编程语言，为css增加一些编程的特性，将css作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。它提供了一些变量、简单的使用逻辑、函数等等，优点是简化了css代码的编写，增加了维护性、可读性和适应性。
CSS预处理器的类型有：Less、Sass、Stylus等；
- Sass：是对css的语法的扩充。诞生于2007年，最早的一款css预处理器语言。它可以使用变量、常量、嵌套、混入、函数等功能。写完需要编译出合法的css才能让浏览器使用，也就是说它本身的语法不是太容易让浏览器识别，因为它不是标准的css格式。
官网地址：sass-lang.com
- Less：2009年开源的一个项目，比较容易上手。它提供了多种能够平滑的将写好的代码转化成标准的css代码，很多框架中常能看到它的身影(如BootStrap)。
官网地址：lesscss.cn
bootstrap中的less教程：www.bootcss.com/p/lesscss/
Less：
一、安装及调用
- 命令行安装(通过node.js软件包管理器npm进行)：
1 $ npm install -g less
- 命令行使用：
调用编译器：
1 $lessc style.less
要将css结果保存到style.css中：
1 $ lessc style.less style.css
要缩小内容，可使用插件clean-css，安装后使用--clean-css选项指定缩小的css输出：
1 $ lessc --clean-css style.less style.min.css
- html内编写：导入style.less文件，(标签属性type=”text/less”)，后导入less.js文件
1 <link rel="stylesheet/less" type="text/css" href="styles.less" />
2 <script src=”less.js”></script>
- less文件编译：编写代码至xxx.less文件中，使用less编译工具编译成xxx.css，在html中导入xxx.css文件
less编译工具：koala-app.com
二、编译：
- 注释：以//开头的，不会编译进css文件中；以/**/包裹的会直接编译进css文件中。
- 变量：使用@来声明一个变量，如@pink:pink;
1 作为普通属性值来使用，如：直接使用@pink; 2 作为选择器和属性名来使用，如：定义：@id:idName;使用：#@{id}; 3 作为URL来使用，如：@{url} 4 变量的延迟加载，即先读取数据再调用，有块级作用域思想
- 嵌套规则：选择器是父子关系，子选择器可以写在父选择器内；同级(包含伪类)则得写在同一级上；在选择器样式内用”&“加伪类可以定义该选择器的伪类或伪元素；
1 /*选择器父子关系的*/ 2 .parent{ 3 /*样式*/ 4 .child{ 5 /*样式*/
6 &:伪类/伪元素{
7 /*样式*/
8 }
9 } 10 .child:伪类/伪元素{ 11 /*样式*/ 12 } 13 &:伪类/伪元素{ 14 /*样式*/ 15 } 16 }
- less的混合：混合式将一系列属性从一个规则集引入到另一个规则集的方式
定义：在less规则有明确指定，使用"."的形式来定义
1 普通混合：将样式调用到另一个地方，集合会被输出到css上，
如：定义：
.集合名{
/*样式*/
}
调用：
.集合名; 2 不带输出的混合：对比普通混合，不会将集合输出到css文件上，
如：定义：
.集合名() {
/*样式*/
}
调用：
.集合名(); 3 带参数的混合：定义时将需要调用的形参写在括号内，在输出时按照顺序写上实参 4 带参数并且有默认值的混合：定义时在形参后面加上冒号和值，
如：
.集合名(@n1:10px){
/*样式*/
} 5 带多个参数的混合：多个参数(形参、实参)用“,“逗号隔开 6 命名参数：定义时有多个参数并带默认值，只要修改其中一项参数的值时，就可以使用命名参数，在调用时括号内形参加冒号加值即可，
如：定义：
.集合名(@n:10px,@m:20px,@a:30px){
/*样式*/};
调用：
.集合名(@a:15px){
/*样式*/
} 7 匹配模式：定义时第一个值取不同，调用时根据写不同的值来匹配与之对应的样式，
如：三角形方向、定位、浮动等 8 匹配不同条件时又想匹配相同条件的样式，可以新建同名混合使用“@_“参数来表示匹配全部 9 arguments变量：相当于数组，定义方法时里面的属性的值引用@arguments时，编译出来的css会将参数按顺序填入该位置，
如：
.border(@1,@2,@3){
border:@arguments;
}；
#ele{
.border(1px,solid,black)
}
编译出来后就是：#ele{border:1px solid #000000}
- 计算：less可以进行 + - * / 等操作，也可以使用小括号进行一些更复杂的运算操作，计算时双方只需其中一方带单位即可；如：
1 @20+20px 2 .ele{width:20+@widht}
- 继承：可以给多个选择器添加相同的样式；包裹在父级内的子集或伪类，父级使用继承，子集的样式同样继承；
1 /*语法*/ 2 .ele:extend(.style){} 3 /*继承类的所有状态(点击、选中等)*/ 4 .ele:extend(.style all){}
5 /*给选择器继承的两种方式*/
6 .ele:extend(.style){}
7 .ele{
8 &:extend(.style);
9 }
混合和继承的区别：混合是把样式复制站别到类中，继承是把相同样式的选择器变成并集选择器；继承性能比混合高，灵活性比混合低；
- 避免编译：在less中，有部分值不想让它编译时编译出来，想保持原样，这时候可以使用特殊的格式来避免：
1 background-color:~“red”; - 外部引用：在less文件中可以在任意位置导入想导入的文件；
1 @import url(文件位置/文件名);