预处器的对比——Sass、LESS.

发挥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;
}