参考资料：
- SASS 用法指南
- SASS 语法
- Sass Basics
- SASS_REFERENCE
sass 有两种后缀名文件：一种后缀名为 sass，不使用大括号和分号；另一种就是我们这里使用的 scss 文件，这种和我们平时写的 css 文件格式差不多，使用大括号和分号。
关于 sass 的编译，采用 gulp + gulp-sass + browser-sync 的组合，详见 Gulp 常用插件 一文中「热重载」一节。
基本用法
变量
SASS 允许使用变量，所有的变量以 $ 开头，用过 PHP 的同学会很熟悉。
值得注意的是，SASS 中的变量通常都不需要加引号，如果加了引号，则生成的 CSS 也带引号，如果没有引号，则生成的 CSS 也没有引号。（还需后续实战总结）
$borderRadius: 30px;
div.main {
height: 100px;
width: 100px;
background-color: black;
border-radius: $borderRadius;
}如果变量需要镶嵌在字符串之中，就需要写在 #{} 之中。
$side: left;
$borderRadius: 30px;
div.main {
height: 100px;
width: 100px;
background-color: black;
border-top-#{$side}-radius: $borderRadius;
}除了普通变量外，SASS 还支持 list 类型和 map 类型，list 类型有点像 JavaScript 中的数组，而 map 类型有点像 JavaScript 中的对象。
list 类型可通过空格，逗号，或者小括号分隔多个值，可用 nth($var, $index) 取值。其他函数请参考 sass Functions（搜索 list functions）
map 类型以 key-value 键值对出现，其中 value 又可以是 list 类型。格式为 $map: (key1: value1, key2: value2)，可通过 map-get($map, $key) 取值。其他函数请参考 sass Functions（搜索 map functions）
计算功能
SASS 允许在代码中使用算式。
$base: 30px;
div.main {
height: 100px;
width: 100px;
background-color: black;
border-top-left-radius: 10px + 20px;
border-top-right-radius: $base * 2;
border-bottom-left-radius: (100px / 2);
border-bottom-right-radius: 50px - 40px;
}注意运算时单位（比如 px）要紧跟着数字，不能 (10+20)px，会被解析成 30 px（数字和单位中间会有个空格）
嵌套
SASS 允许选择器嵌套。比如下面的 CSS 代码：
div.main h1 {
color: red;
}可以写成：
div.main {
h1 {
color: red;
}
}属性也可以嵌套：
div.main {
height: 100px;
width: 100px;
// background-color: red;
// 等价于下面的代码
background: {
color: red;
}
}和选择器嵌套不同的是，这里要注意 background 后必须加上冒号。
在嵌套的代码块内，可以使用 & 引用父元素，在写伪类的时候比较常用：
a {
color: red;
&:hover {
color: black;
}
}
.post {
font-size: 1em;
&-head {
font-size: 1.8em;
}
}注释
SASS 共有两种注释风格。
标准的 CSS 注释 /* comment */ ，会保留到编译后的文件。
单行注释 // comment，只保留在 SASS 源文件中，编译后被省略。
在 /* 后面加一个感叹号，表示这是 "重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
/*!
重要注释！
*/@at-root
Sass3.3.0 中新增的功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。
// sass style
.content {
@at-root #{&}-header {
color: red;
}
@at-root #{&}-content {
color: blue;
}
}
// css style
.content-header {
color: red;
}
.content-content {
color: blue;
}代码复用
继承
SASS 允许一个选择器，继承另一个选择器。
div.first {
height: 100px;
width: 100px;
background-color: green;
}
div.second {
@extend div.first;
border: {
color: red;
width: 10px;
style: solid;
}
}也就是说，某个选择器可以继承另一个选择器的所有样式，并在它的基础上添加样式。
占位选择器 %
这里我们得强势插入占位选择器 %，配合 @entend 风味更佳。从 Sass 3.2.0 以后就可以定义占位选择器 %。这种选择器的优势在于：如果不调用则不会有任何多余的 css 文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了 @extend 去继承相应的样式，都会解析出来所有的样式。占位选择器以 % 标识定义，通过 @extend 调用。
比如这段代码：
.base {
height: 100px;
width: 100px;
background-color: green;
}
div.second {
@extend .base;
border: {
color: red;
width: 10px;
style: solid;
}
}编译的结果是：
.base, div.second {
height: 100px;
width: 100px;
background-color: green;
}
div.second {
border-color: red;
border-width: 10px;
border-style: solid;
}但是 .base 这个类实际并没有用到，我们不希望它在样式表中，可以用占位选择器：
%base {
height: 100px;
width: 100px;
background-color: green;
}
div.second {
@extend %base;
border: {
color: red;
width: 10px;
style: solid;
}
}这时我们再看生成的样式表：
div.second {
height: 100px;
width: 100px;
background-color: green;
}
div.second {
border-color: red;
border-width: 10px;
border-style: solid;
}Mixin
还是上面的例子，有两个 div，它们有一些基础样式，但是又不能用继承关系，这时就可以用 Mixin 定义可以复用的代码块。
使用 @mixin 命令，定义一个代码块。
@mixin divBase {
width: 100px;
height: 100px;
}使用 @include 命令，调用这个 mixin。
div.first {
@include divBase;
background-color: green;
}
div.second {
@include divBase;
background-color: red;
}其实这个例子举的不好，用 @extend 也能实现，但是mixin 的强大之处，在于可以指定参数和缺省值。
@mixin divBase($width: 100px, $height: 100px) {
width: $width;
height: $height;
}
div.first {
@include divBase;
background-color: green;
}
div.second {
@include divBase(20px, 50px);
background-color: red;
}颜色函数
SASS 提供了一些内置的颜色函数，以便生成系列颜色。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c插入文件
@import 命令，用来插入外部文件（.scss 和 .css 的后缀可以省略）。
@import 'b.scss';
@import 'c.css';高级用法
条件语句
@if 以及 @else 以及 @else if 命令：
div.second {
width: 100px;
height: 100px;
@if (1 + 1 != 2) {
background-color: red;
} @else {
background: {
color: black;
}
}
}注意 SASS 中只有 == 、!= 没有 ===。
循环语句
循环语句我觉得是 SASS 中最好用的功能，让我觉得 SASS 真的是一种 "编程语言"。
比如有一张雪碧图，如果仅仅用 CSS，我们可能会写出如下 "又臭又长" 的代码：
div.bg_1 {
float: left;
width: 50px;
height: 50px;
background-image: url(bg.jpg);
background-position: 0 0;
}
div.bg_2 {
float: left;
width: 50px;
height: 50px;
background-image: url(bg.jpg);
background-position: -50px 0;
}
div.bg_3 {
float: left;
width: 50px;
height: 50px;
background-image: url(bg.jpg);
background-position: -100px 0;
}我们先用 SASS 的 Mixin 复用一些代码（用 @extend 也可以）：
@mixin divBase {
float: left;
width: 50px;
height: 50px;
background-image: url(bg.jpg);
}
div.bg_1 {
@include divBase;
background-position: 0 0;
}
div.bg_2 {
@include divBase;
background-position: -50px 0;
}
div.bg_3 {
@include divBase;
background-position: -100px 0;
}接着我们就来用循环语句进一步精简代码。
SASS 支持 for 循环：
@mixin divBase {
float: left;
width: 50px;
height: 50px;
background-image: url(bg.jpg);
}
@for $i from 1 to 4 { // [1, 4)
div.bg_#{$i} {
@include divBase;
background-position: -50px * ($i - 1) 0;
}
}我们注意下上面的循环次数，是 [1, 4)，如果想要 [1, 4]，则要用 through 关键字：
@for $i from 1 through 4 { // [1, 4]
div.bg_#{$i} {
@include divBase;
background-position: -50px * ($i - 1) 0;
}
}支持 while 循环：
@mixin divBase {
float: left;
width: 50px;
height: 50px;
background-image: url(bg.jpg);
}
$i: 1;
@while $i < 4 {
div.bg_#{$i} {
@include divBase;
background-position: -50px * ($i - 1) 0;
}
$i: $i + 1;
}我们还可以用 each，语法为 @each $var in
@each $i in (1, 2, 3) {
div.bg_#{$i} {
@include divBase;
background-position: -50px * ($i - 1) 0;
}
}我们可以把 (1, 2, 3) 抽象为一个变量，有点 JavaScript 中数组的意思，这样更灵活，这样数字不一定是等比数列，适用范围就更广了。我喜欢 each！
$num: (1, 2, 3);
@each $i in $num {
div.bg_#{$i} {
@include divBase;
background-position: -50px * ($i - 1) 0;
}
}自定义函数
@function double($n) {
@return $n * 2;
}
div.second {
width: 100px;
height: double(100px);
background-color: red;
}