发挥CSS预处器的作用是一种很有挑战性的事情。CSS预处器有不同的语言，有不同的语法和功能。
不同CSS预处器的蛮量、功能以及他们的好处——Sass、LESS
介绍
CSS预处理器是一种语言，用来编写一些CSS的特性,而且无需考虑浏览器兼容性的问题。他们通过编译的代码编写成一般的CSS,不要在停留在石器时代了。
Sass和LESS
Sass和LESS都使用的是标准的CSS语法。这使用CSS预处器非常容易的将预处器代码转换成CSS代码。默认Sass使用“.scss”扩展名，而LESS使用“.less”扩展名。Sass和LESS基本设置可以像下面所示：
/* style.scss 或者 style.less */
h1 {
color: #0982C1;
}
变量(Variables)
你可以在CSS预处理器中声明变量,并在整个样式表中使用。CSS预处理器支持任何变量（例如：颜色、数值（不管是否包括单位）、文本）。然后你可以在任意地方引用变量。
Sass
Sass声明变量必须是“$”开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号（：）隔开。就像CSS属性一样：
$mainColor: #0982c1;
$siteWidth: 1024px;
$borderStyle: dotted;
body {
color: $mainColor;
border: 1px $borderStyle $mainColor;
max-width: $siteWidth;
}
LESS
LESS声明变量和Sass声明变量一样，唯一区别是变量名前面使用是的“@”字符：
@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted;
body {
color: @mainColor;
border: 1px @borderStyle @mainColor;
max-width: @siteWidth;
}
嵌套（Nesting）
如果我们在CSS中多个元素有一个相同的父元素，那么写样式会变得很乏味，我们需要一遍一遍的在每个元素前写这个父元素.
section {
margin: 10px;
}
section nav {
height: 25px;
}
section nav a {
color: #0982C1;
}
section nav a:hover {
text-decoration: underline;
}