一. 为什么会出现css预处理器
CSS不是一种编程语言，仅仅只能用来编写网站样式，在web初期时，网站的搭建还比较基础，所需要的样式往往也很简单。但是随着用户需求的增加以及网站技术的升级，css一成不变的写法也渐渐不再满足于项目。没有类似js这样的编程语言所有的变量，常量以及其他的编程语法，css的代码难免会显得臃肿以及难以维护。但是又没有css的替代品，于是css预处理器就作为css的扩展，出现在了前端技术中。
二.常见的css预处理器
发展至今，CSS预处理器的技术已经相当成熟，也涌现出了很多中不同的CSS预处理器语言。目前主流的有三种：Sass(Scss), Less, Stylus。
三.CSS预处理器的方便之处
–以Sass为例
–Sass主要的功能有：允许定义变量，允许CSS代码嵌套，函数功能，Mixin，继承等。 这些功能使得编写CSS更加贴合编程语言的习惯，使得CSS代码复用性更高，代码功能更加直观，也更加易于程序员的阅读与维护。
四.sass
它是一个通过转换scss 的 css文件，文件后缀名：.scss。
sass有两种语法形式
首先是scss，也就是我们这个后缀形式的语法，是最新的一种形式。这种格式在 CSS3 语法的基础上进行扩展，这意味着每个CSS样式表是一个同等的SCSS文件。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器专属前缀语法，这种语法的样式表文件需要以 .scss 作为拓展名。
另一种，也是最早的语法，被称为缩进语法。它提供了一种更加简洁的方式来书写CSS。它使用缩进而不是花括号来表示选择器的嵌套，用换行而不是分号来分隔属性，一些人认为这样做比 SCSS 更容易阅读，书写也更快速。缩排语法具有 Sass 的所有特色功能，虽然有些语法上稍有差异。使用此种语法的样式表文件需要以 .sass 作为扩展名。
主要功能
-
可以使用变量、常量；
-
允许css代码嵌套；
-
混入Mixin；
-
继承；
-
循环语句等功能。
这些功能使得编写css更加贴合编程语言的习惯，从而更有效有弹性的写出CSS
1.变量（Variables）
变量的提供，可以避免由于设计师频繁更改某一全局属性（比如整体颜色风格），而引起的被动增加工作量问题。
变量的使用：以$开头，有全局变量和局部变量。
sass的变量必须是$开头，后面紧跟变量名，变量值和变量名之间需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。
$bgColor: #ffffff; // 全局变量
div {
$width: 1000px; // 局部变量
width: $width;
background: $bgColor;
}
变量用在属性中
变量用在属性中，需要写在#{ }中，如下：
$posi: left;
div {
border-#{$posi}: 1px solid $color;
}
2.嵌套（Nesting）
Sass允许代码嵌套，用于选择后代。相对于css原生的后代选择器，嵌套样式的代码，会更加直观。包括选择器嵌套，属性嵌套。
选择器嵌套
选择器嵌套：在一个选择器中嵌套另一个选择器来实现继承，增强了sass文件的结构性和可读性。
在选择器嵌套中，可以使用&表示父元素选择器，示例如下：
scss
#top_btn{
line-height: 40px;
text-transform: capitalize;
background-color:#333;
li{
float:left;
}
a{
display: block;
padding: 0 10px;
color: #fff;
&:hover{
color:#ddd;
}
}
}
css：
#top_btn{
line-height: 40px;
text-transform: capitalize;
background-color:#333;
}
#top_btn li{
float:left;
}
#top_btn a{
display: block;
padding: 0 10px;
color: #fff;
}
#top_btn a:hover{
color:#ddd;
}
属性嵌套
除了选择器可以嵌套，属性和伪类也可以嵌套。
属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。
示例：
.main-container {
&-top { // 选择器嵌套
background {
color: red; //属性嵌套
}
&:hover { // 伪类嵌套
color: green;
}
}
}
3.混合（Mixins）
Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。
例如：某段CSS样式经常要用到多个元素中，在CSS预处理器语言中，可以为这些公用的CSS样式定义一个Mixin，然后在需要使用这些样式的地方直接调用定义好的Mixin。
这是一个非常有用的特性，Mixins 被当作一个公认的选择器，还可以在Mixins中定义变量或者默认参数。
声明的@mixin通过@include来调用。
无参数mixin：
@mixin center-block {
margin-left:auto;
margin-right:auto;}
.btn{
@include center-block;
}
css：
.btn{
margin-left:auto;
margin-right:auto;
}
有参数mixin：
sass中使用
