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 变量的延迟加载，即先读取数据再调用，有块级作用域思想
- 嵌套规则：选择器是父子关系：子选择器可以写在父选择器内；同级(包含伪类)则得写在同一级上
- 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 @width:20+20px 2 .ele{width:20+@widht}
- 外部引用：@import “文件位置/文件名”;