CSS预处理器
CSS 预处理器定义了一种新的语言，其基本思想是：用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。
到目前为止，最常用的CSS预处理器有Sass、Less和Stylus。
less的介绍
less 是一款比较流行的预处理 CSS，支持变量、混合、函数、嵌套、循环等特点。
less的使用
注释
less的注释有两种
第一种：模版注视
// 模板注释 这里的注释转换成CSS后将会删除
因为 less 要转换为 css才能在浏览器中使用。转换成 css 之后，这种注释会被删除（毕竟 css 不识别这种注释）。
第二种：css注释语法
/* CSS 注释语法 转换为CSS后让然保留 */
总结：如果在less中写注释，我们推荐写第一种注释。除非是类似于版权等内容，就采用第二种注释。
定义变量
我们可以把重复使用或经常修改的值定义为变量，在需要使用的地方引用这个变量即可。这样可以避免很多重复的工作量。
在less文件中，定义一个变量，并使用
@变量名: 变量值; //格式
@bgColor: #f5f5f5; //格式举例
// 引用变量
body{
background-color: @bgColor;
}
我们将上面的less文件编译成css文件后，会自动生成如下代码：
body{
background-color: #f5f5f5;
}
嵌套
在css中经常用到的子代选择器，代码如下“：
.container {
width: 1024px;
}
.container > .row {
height: 100%;
}
.container > .row a {
color: #f40;
}
.container > .row a:hover {
color: #f50;
}
用 less 的嵌套语法来写这段代码，就比较简洁清晰：
.container {
width: @containerWidth;
> .row {
height: 100%;
a {
color: #f40;
&:hover {
color: #f50;
}
}
}
Mixin
Mixin的作用是把重复的代码放到一个类当中，每次只要引用类名，就可以引用到里面的代码了，非常方便。
在less文件中定义一个类：
/* 定义一个类 */
.roundedCorners(@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
其中，@radius为参数，5px为默认值，可以空。
在less文件中使用上面定义的这个类：
#header {
.roundedCorners;
}
#footer {
.roundedCorners(10px);
}
参数可以有多个，有多个参数时用分号隔开，调用时就是通过变量名称，而不是位置。
.mixin(@radius:10px;@color：green;) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
color:@color;
}
使用：
#header{
.mixin(@color:green);
}
.button{
.mixin(@color:green);
}
less的内置函数
percentage（百分比）
.button {
width:percentage(.5);
}
编译之后的css为：
.button {
width:50%;
}
混合
抽取公共类，例如下面的css代码可以用less这样编写
css代码如下：
在css中的代码：
#header a {
color: #111;
border-top: solid 1px #595959;
border-bottom: solid 2px #595959;
}
#header span {
height: 16px;
border-top: solid 1px #595959;
border-bottom: solid 2px #595959;
}
#header p {
color: red;
border-top: solid 1px #595959;
border-bottom: solid 2px #595959;
}
.borde_style {
border-top: solid 1px #595959;
border-bottom: solid 2px #595959;
}
less文件中，我们可以定义一个公共的样式名borde_style，代码如下：
.borde_style {
border-top: solid 1px #595959;
border-bottom: solid 2px #595959;
}
#header a {
color: #111;
.borde_style;
}
#header span {
height: 16px;
.borde_style;
}
#header p {
color: red;
.borde_style();
}
文件引入 Import
在开发阶段，我们可以将不同的样式放到多个文件中，最后通过@import 的方式合并。意思就是，当出现多个 less 文件时，怎么引用它们。
定义一个被引用的less文件，名为_button1.less:
.btn{
line-height: 100px;
color: @btnColor;
}
在另一个less文件中引用：
@btnColor: red;
@import url(`_button1.less:‘); //这里的路径写的是相对路径
body{
width: 1024px;
}
编译之后的代码如下：
.btn {
line-height: 100px;
color: red;
}
body {
width: 1024px;
}
总结：less的优势和劣势
优势
开发速度提升
代码优化效率提高（对开发者而言）
代码更通俗易懂（对开发者而言）
代码更干净，优美
维护简单便捷
功能更多更强
劣势
舍弃用户体验来提高开发的效率
舍弃网页打开速度换取开发效率提升
需要多一个编译器来重新编译一次CSS代码，也就是给浏览器多了一道工序，网页显示的速度会减慢