什么是CSS编译器
CSS编译器，也叫做CSS预编译器，是指开发者使用某种类似CSS（但实际不是）的语言编写代 码，然后通过编译器，将其编译成浏览器真正能执行的CSS代码。
目前常见的CSS编译器有：SASS和LESS。本文已常用的SASS为例，来讲解如何用SASS来实现 优雅简洁的CSS代码。
1. Autoprefix自动前缀
选中该选项，在编译时，会自动对浏览器有兼容问题的属性加上厂商前缀。
2. compressed压缩模式
选中该选项，在编译时，会对生成的代码进行压缩，以达到小文件体积。
变量：
sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变 量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一 次的属性 值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。
sass使用 $ 符号来标识变量。
变量声明：
sass变量的声明和css属性的声明很像： $highlight-color: #F90; 这意味着变量$highlightcolor 现在的值是#F90。任何可以用作css属性值的赋值都可以用作sass的变量值，甚至是以空格分割的 多个属性值，如 $basic-border: 1px solid black; ，或以逗号分割的多个属性值，如
$plain-font: "Myriad Pro","Myriad","Helvetica Neue","Helvetica","Liberati on Sans","sans-serif";
这时变 量还没有生效，除非你引用这个变量——我们很快就会了解如何引用。
与CSS属性不同，变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只 能在此规则块内使用。如果它们出现在任何形式的{…}块中：
$nav-color: #F90; nav { $ 100px;
$width; //$width只能在该规则块中使用 color: $nav-color; }
编译后：
nav { 100px; color: #F90; }
在这段代码中， $nav-color 这个变量定义在了规则块外边，所以在整个样式表中都可以像 nav规 则块那样引用它。 $width 这个变量定义在了nav的{ }规则块内，所以它只能在nav规则块内使用。 这意味着是你可以在样式表的其他地方定义和使用 $width 变量，不会对这里造成影响。
只声明变量其实没啥用处，我们终的目的还是使用它们，接下来我们将进一步探讨变量的使用方法。
变量引用：
凡是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用。css生成时，变量 会被它们的值所替代。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此 变量的地方生成的值都会随之改变。
看上边示例中的 $highlight-color 变量，它被直接赋值给 border 属性，当这段代码被编译输出 css时， $highlight-color 会被 #F90 这一颜色值所替代。产生的效果就是给 selected 这个类一 条1像素宽、实心且颜色值为 #F90 的边框。
嵌套CSS 规则
嵌套属性：
在sass中，除了CSS选择器，属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么 糟糕，但是要反复写 border-style 、 border-width 、 border-color 以及 border-* 等也是非 常烦人的。在sass中，你只需敲写一遍border：
混合器
如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体），那么使用变量来统一处理 这种情况是非常不错的选择。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代 码，独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。