安装
因为SASS是Ruby语言写的，但两者的语法没有关系，所以我们必须先安装Ruby，然后再安装SASS。
安装好Ruby之后，在命令行输入：gem install sass
然后就可以使用了。
使用
SASS文件的后缀名是.scss，意思是Sassy CSS。
下面的命令可以在屏幕上显示.scss文件转化的css代码（假设文件名是test）: sass test.scss
如果要将显示结果保存为文件，后面再跟一个.css文件名：sass test.scss test.css
SASS提供四个编译风格的选项：
a. nested：嵌套缩进的css代码，它是默认值
b. expanded：没有缩进的、拓展的css代码
c. compact：简介格式的css代码
d. compressed：压缩后的css代码
生产环境中一般使用最后一个选项：sass --style compressed test.sass test.css
也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
基本使用
1. 变量
所有变量均以$开头，如 $blue: #1875e7
如果变量需要镶嵌在字符串之中，就必须写在#{}之中
如：
$side: left
.rounded {
border-#{side}-radius: 5px;
}
2. 计算功能
SASS允许在代码中使用算式，如：margin: (14px + 25px)/2
3. 嵌套
SASS允许选择器嵌套，属性也可以嵌套,比如border-color属性
p {
border: { // 注意border这里必须加冒号
color : red;
}
}
在嵌套的代码块内，可以引用&引用父元素，比如a:hover伪类，可以写成：
a {
&: hover { color: #ffb3ff; }
}
4. 注释
SASS共有两种注释风格。
标准的CSS注释 /* comment */ ，会保留到编译后的文件。
单行注释 // comment，只保留在SASS源文件中，编译后被省略。
在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
代码的重用
1. 继承
SASS允许一个选择器继承另一个选择器
. class1 { border: 1px solid #ddd; }
class2要继承class1, 就要使用@extend命令： .class2 { @extend .class1; }
2. Mixin
使用@mixin命令，定义一个代码块
使用@include命令，调用这个mixin
mixin的强大之处，在于可以指定参数和缺省值
@mixin left($value: 10px) {
margin-right: $value;
}
使用的时候，根据需要加入参数
div { @include left(20px))}
3. 颜色函数
SASS提供了一些内置的颜色函数，以便生成系列颜色。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
4. 插入函数
@import命令，用来插入外部文件
@import "path/filename.scss"
高级用法
1. 条件语句
@if可以用来判断：
p {
@if 1+1==2 {}
@else {}
}
2. 循环语句
SASS支持for和while循环
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
3. 自定义函数
SASS允许用户编写自己的函数
@function double($n) {
@return $n*2;
}
#sidebar {
width: double(5px);
}