背景

自css诞生以来，基本语法和核心机制一直没变化，提高的也只是表现力层面上，如今网站越来越复杂的结构以及环境带给开发者管理和维护上更加的艰难，原来的css已经不足以满足开发者的要求，于是便出现了css预处理器。目前主流的预处理语言主要是 Sass、Less 和 Stylus。

**预处理器的特性

一、变量**

在变更出现之前，CSS 中的所有属性值都是 “幻数”。你不知道这个值是怎么来的、它的什么样的意义。有了变量之后，我们就可以给这些 “幻数” 起个名字了，便于记忆、阅读和理解。

接下来我们会发现，当某个特定的值在多处用到时，变量就是一种简单而有效的抽象方式，可以把这种重复消灭掉，让你的代码更加DRY。

$width: 5em;
#main {
  width: $width;
}

二、运算

光有变量还是不够的，我们还需要有运算。如果说变量让值有了意义，那么运算则可以让值和值建立关联。有些属性的值其实跟其它属性的值是紧密相关的，CSS 语法无法表达这层关系；而在预处理语言中，我们可以用变量和表达式来呈现这种关系。

变量也支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明：

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}

三、函数

把常用的运算操作抽象出来，我们就得到了函数。

开发者可以自定义函数，预处理器自己也内置了大量的函数。最常用的内置函数应该就是颜色的运算函数了吧！有了它们，我们甚至都不需要打开 Photoshop 来调色，就可以得到某个颜色的同色系变种了。

举个例子，我们要给一个按钮添加鼠标悬停效果，而最简单的悬停效果就是让按钮的颜色加深一些。我们写出的 CSS 代码可能是这样的：

.button {
background-color: #ff4466;
}
.button:hover {
    background-color: #f57900;
}

我相信即使是最资深的视觉设计师，也很难分清 #ff4466 和 #f57900 这两种颜色到底有什么关联。而如果我们的代码是用预处理语言来写的，那事情就直观多了：

.button
    $color = #ff9833

    background-color: $color
    &:hover
        background-color: darken($color, 20%)

此外，预处理器的函数往往还支持默认参数、具名实参、arguments 对象等高级功能，内部还可以设置条件分支，可以满足复杂的逻辑需求。

四、混合（mixin）

Mixin是可以预先把需要的东西封装好，也可以接受参数给混合定义中设定样式，也可以自定义参数变量，如此可以使用我们多次引用定义好的mixin来实现相同的样式属性，而对于有些会有差异，我们也可以使用传入不同的参数来达到不同的效果。

@mixin sexy-border($color, $width) {
    border: {
        color: $color;
        width: $width;
        style: dashed;
    }
}
p { @include sexy-border(blue, 1in); }

编译为

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

五、嵌套

在css预处理语言中，可以在一个选择器中直接嵌套另一个选择器来实现继承，这样很清晰表达出样式表中的层次关系，也大大的减少了代码量。

先看一下大家很熟悉的代码段

.header{width:400px;height:200px;}
.header ul{list-style:none;padding：0；}
.header ul li {height：30px;margin:0 10px;}
.header .title p{color:#333;backgroud:#eee}

而使用嵌套，我们可以将其优化成如下：

.header
    width:400px;
    height:200px;
    ul
        list-style:none;
        padding：0；
        li
            height：30px;
            margin:0 10px;
    title
        a
            color:#333;
            backgroud:#eee