由于css没有变量、函数、运算符等特性，因此在编写它的时候会显得比较冗余和麻烦。所以就有css预处理器，它引入了变量、嵌套、运算、函数、继承等概念。让css的编写起来得心应手，并且后期维护性也高。

提到css预处理器，最常见的有Sass、Less CSS、Stylus。但听说Sass相对其他优势不少，因此，此篇就说Sass的语法。

一. 变量

如上所说的，Sass可以定义变量，并且这些变量都是以$开始，这样我们就可以直接在元素里引用变量，当需要更改元素css属性值时，只需改变变量即可全部替换。

简单的定义变量：

$width:1000px;
.box{width:$width;}

定义属性和变量

$width:100px;
$ml:left;
.box {margin-#{$ml}:$width;}

二. 嵌套

传统的css中，当我们需要给box元素加width属性，并且给它的子元素content加height属性，还要给content里的a标签加颜色属性时，我们会这样写：

.box{width:;}
.box .content{height:;}
.box .content a{color:;}

但是在Sass中，它是这样做的，通过层层嵌套：

$width:1000px;
$height:100px;
color:#000;

.box{
    width:$width;
    .content{
        height:$height;
        a{
            color:#000;
        }
    }    
}

三. 继承

所谓继承，也就是把定义的一个类，直接添加到作用类的css中。其实它完全可以通过组合class选择器来实现的，只不过这里存在着变量的概念。

.ptb10{padding:10px 0;}
.box{
    margin:10px 0;
    @extend .ptb10;    
}

四.混入（ Mixin）

在Sass中引入了Mixin这个一个功能，它就像javascript里面的函数，定义之后可以重复调用，并且还带有类似参数功能。如果引用时没带参数，则是使用默认参数。反之则使用实参。Mixin是通过@include来调用的：

@mixin ml($value:10px) {
　　　　margin-left:$value;
　　}

.box{
    @include ml(20px);
}

五. 运算符

曾经也在css使用过运算符，比如ie6下的expression表达式。但常规的css代码并不支持“+”、“-”、“*”、“/”这些运算符，而在Sass中，则引入运算符的处理：

.box{
    width:200px+300px;
    height:300px-200px;
    left:3*10px;
    top:(60px/2);     
}

六. 颜色函数

Sass定义了一些改变原有颜色的函数，以下列出主要几种，它们分别是：

$color1:#F90;

lighten($color1,10%)  /*将颜色调成$color1变亮的10%*/
 
darken($color1,10%)  /*将颜色调成$color1变暗的10%*/

grayscale($color1)    /*将颜色调成$color1的灰度色*/

mix($color1,$color2,50%)  /*将颜色调成分别以两种颜色的50%色值的混合*/

七. css3浏览器前缀

因为css3的某些属性在不同浏览器需要加对应的前缀，这让我们在编写时显得繁琐。而Sass利用混合（mixin）即可做到让元素属性生成浏览器前缀，因此Sass这个功能是非常实用的。

@mixin transform($value:10deg) {
    -webkit-transform:rotate($value);
       -moz-transform:rotate($value);
        -ms-transform:rotate($value);
         -o-transform:rotate($value);
}

.box{
    @include transform(20deg);
}

sass还支持 if 的判断以及 for,while 的循环，但个人暂未对这些语法进行运用，故此处未列出。