Sass入门：第一章

1.什么是预处理器？

　　CSS预处理器是用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题。

　　可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些特性，可以让你的CSS更加简洁、适应性更强、可读性更佳、更易于代码的维护等诸多好处。

例如：

$color : red ; //使用了变量$color
.test {
    color : $color ;
}

2.CSS预处理语言：

　　▶Sass(SCSS)

　　▶LESS

　　▶Stylus

　　▶Turbine

　　▶Swithch CSS

　　▶CSS Cacheer

　　▶DT CSS

　　到目前为止，在众多优秀的CSS预处理语言中，就属Sass、LESS和Stylus最优秀。

3.什么是Sass？

　　Sass官网的描述是：Sass是一门高于CSS的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通CSS更强大的功能。Sass能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。

　　Sass是采用Ruby语言编写的一款CSS预处理语言。有着和HTML一样的缩进风格。

4. Sass和SCSS有什么区别？

　　Sass和SCSS其实是同一种东西，两者的区别有：

　　▶文件扩展名不同：Sass是以".sass"后缀为扩展名，而SCSS是以".scss"后缀为扩展名。

　　▶语法书写方式不同：Sass是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而SCSS的语法书写和我们的CSS语法书写方式非常类似。

　　看下面的例子：

Sass语法

$font-stack : Helvetica , sans-serif      //定义变量
$primary-color : #333       //定义变量

body
    font : 100% $font-stack
    color : $primary-color

SCSS语法

$font-stack : Helvetica , sans-serif;
$primary-color : #333;

body {
    font : 100% Helvetica , sans-serif;
    color : #333;
}

编译出来的CSS

body {
    font : 100% Helvetica , sans-serif;
    color : #333;
}