CSS预处理器
1. 基于CSS的另一种语言
2. 通过工具编译成CSS
3. 添加了很多CSS不具备的特性
4. 能提升CSS文件的组织方式
CSS预处理器的作用
1. 帮助更好的组织CSS代码
2. 提高代码复用率
3. 提升可维护性
CSS预处理种类
1. Less 文件后缀名：.less
a) 基于node写的
b) JS写的编译速度快
2. Sass 文件后缀名：.scss
a) Ruby写的C++写的，有node版本：node-sass
CSS预处理器的功能
1. 嵌套：反映层级和约束
2. 变量和计算：减少重复代码
3. Extend和Mixin：代码片段复用
4. 循环：适用于复杂有规律的样式
5. import：CSS文件模块化
预处理器的优缺点
1. 优点：提高代码复用率和可维护性
2. 缺点：需要引入编译过程，有学习成本
less嵌套
&：同级的意思，中间无空格
sass嵌套
与less几乎相同
less变量和计算（变量用@声明）
sass变量和计算（变量用$声明）
less mixin （功能：样式的复用）
类似JS函数写了一个.block的函数调用
sass mixin （功能：样式的复用）
必须要有@mixin声明，block前没有点.
使用上也有区别：调用时要包含@include 并且block前没有点.
Less extend （提取公共样式解决重复CSS代码）
Extend是扩展某一个选择器，因此就不加参数了先定义一个标准的选择器.block
然后通过：extend调用选择器
&符号是同级关系因此有以下相同写法
编译后结果
公共的样式：
独有的样式：
l Extend与mixin的对比：
n extend是将选择器提取出来，将公共的样式写到一起，独有的样式单独写出来。
u extend编译后结果：
n mixin是直接将代码复制过来
u mixin编译后结果：
Sass extend
sass中使用extend的方式使用@extend
运行结果与less结果相同，只是选择器有无换行。
Less loop（循环）
循环生成一个网格：
编译结果：
总共12个
Sass loop
编译结果与less相同
以有更加方便的写法，sass中支持for循环，less中不支持
less import （CSS模块化）
编译结果：
sass import
用法与less基本一样
CSS预处理器框架
1. SASS-Compass
2. Less-Lesshat/EST
3. 提供现成的mixin
4. 类似JS类库：封装常用功能