# 为什么要学习 css 的预编译处理器
CSS 最明显的短板就是它只是一个标记语言，没有变量、语句等编程语言的特点。如果项目过长，写起来有些麻烦，而且会产生较多的重复代码。
虽然只要团队中的成员都有模块化的思想，并有统一的规范，可以完全不在团队中使用与处理器，但是为了能让写 css 变得像写 JS 那样灵活，支持变量、语句、混合（mixin）、函数等等，就产生了预处理器。
比如 bootstrap 的 css 就是有 css 预编译写好再转成普通 css 文件的。后面我们学习 vue.js 或者看别人写的项目，到公司上班都很有可能遇到 css 预编译处理器。所以我们得学会如何使用。
# 常见的预编译处理器
1、sass(Syntactically Awesome StyleSheets)
官网：http://sass-lang.com/
中文：http://sass.bootcss.com/
学习教程：
http://www.ruanyifeng.com/blog/2012/06/sass.html
线上测试工具：https://www.sassmeister.com/
2、less
less 受 sass 影响较大，也就是写法借鉴了 sass，两者语法类似
官网：http://lesscss.org/
中文：http://lesscss.cn/
学习教程：
http://www.bootcss.com/p/lesscss/
http://www.runoob.com/manual/lessguide/
https://zh.wikipedia.org/wiki/Less_(层叠样式表)
3、stylus
因为 node.js 的兴起才诞生的，但流行程度远不及以上两者。
两者语言语法差不多，基本上一通全通。相比较而言，less稍微简单一点点，更适合前端开发，而sass更适合偏后端使用。
# less 语法
-
变量
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20JS:
var a=1;
less:
@red:red;//值是红色
@br:1px solid blue;
@m10:10px;
使用：
div{
color:@red;
border:@br;
margin:@m10;
padding-top:@m10;
}
//以上代码最终会编译成如下正常格式：
div{
color:red;
border:1px solid blue;
margin:10px;
padding-top:10px;
} -
混合（类似于函数，可以重复使用，定义一个 classA, 可以到处使用，比如嵌入到另外一个 classB 中）
目的：被继承
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15//定义一个函数
.round(@r:10px){
border-radius:@r;
}
//使用：
div{
//需要使用一个圆角
//border-raidus:5px;
.round(5px);
}
//最终会被解析为：
div{
border-raidus:5px;
} -
嵌套
类似于 HTML 嵌套一样，可以通过嵌套的方式来写 less 代码。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40<div class="box">
<p>
<span>这是文字</span>
<a href="#">链接</a>
</p>
</div>
//需求：给a,span添加样式,常规写法需要后代选择器
.box p span{
}
.box p a{
}
//用less来写，可以写成嵌套的方式
.box{
border:1px solid red;
p{
margin-top:0px;
span{
color:red;
}
a{
text-align:center;
color:green;
&:hover{
background-color:orange;
}
&:active{
background-color:green;
}
}
}
}
//以上等价于
.box {border:1px solid red;}
.box p{marginTop:0px;}
.box p span{color:red;}
.box p a{text-align:center;color:green;}
.box p a:hover{background-color:orange;}
.box p a:active{background-color:green;}
# 如何使用（语法通用）
-
在浏览器环境下使用
两种使用条件：
a. 需要在服务器环境下进行（要借助 JS 完成）
1
2
3
4
5
6
7
8//在要使用less的HTML文件中写如下代码：
<!-- 导入less文件 -->
<link rel="stylesheet/less" type="text/css" href="style.less">
<!-- 导入解析less的JS文件
下载地址：https://raw.githubusercontent.com/less/less.js/v2.5.3/dist/less.min.js
-->
<script src="less.min.js"></script>
//2. 在服务器环境下打开该项目或文件b. 先编译再使用（非常原始的用法，很不方便）
1
2
3
4
5
6在任意文件夹下，通过npm下载less包
cnpm i less -g
//看看是否安装成功
lessc -v //3.12.2
//编译 输入less文件，输出css文件
lessc less文件 css文件 -
在 Nodejs 或 webpack 环境下使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
161、将less放到src中当做模块来打包，在main.js中导入
// 导入less文件
require('./less/style.less');
2、在webpack.config.js中导入less-loader来处理
{
// 添加打包css|less的配置
test: /\.(css|less)$/,
use: ['style-loader','css-loader','less-loader']
}
3、在当前项目目录下下载less-loader和less包
cnpm i less-loader less -D
4、npm start 启动该项目（先确保安装了该项目的所有的依赖包）
5、OK，完成！在项目中直接写less代码会自动编译和刷新页面
