和less一样，sass也是一门css预处理语言，但是功能却更强大。在写sass前的准备是ruby和sass的安装。
安装及编译
- ruby安装包传送门（Windows）：https://pan.baidu.com/s/1pLyJTij
- 安装教程传送门：http://www.w3cplus.com/sassguide/install.html
- 编译：
首先创建一个.scss文件（用来编写sass的），举例假设命名为demo.scss，在ruby下：
单一文件编译
其实国内也有一款很好的编译软件叫考拉，简单易操作，适合新手。
传送门：https://pan.baidu.com/s/1mh7nZIw#list/path=%2F
基本用法
- 变量
sass中变量用$符号加上变量名称：
$blue: blue;
$fontSize: 50px;
h1{
color: $blue;
font-size: $fontSize;
}
编译过对应的css：
h1 {
color: blue;
font-size: 50px;
}
- 运算
sass中变量可以进行运算：
$fontSize: 50px;
h1{
font-size: $fontSize + 20px;
}
编译过对应的css：
h1 {
font-size: 70px;
}
- 嵌套
sass是支持选择器嵌套的，逻辑更清晰：
div{
h1{
font-size: 70px;
}
}
编译过对应的css：
div h1 {
font-size: 70px;
}
在嵌套中，可以使用&来引用父元素，例如在运用伪类时：
div{
& : hover { color: red }
}
代码重用
- 继承
sass可以让选择器能继承另一个选择器的代码，如下，.box2想要继承.box1的代码，用@extend+选择器进行继承：
.box1{
width: 100px;
height: 100px;
}
.box2{
@extend .box1;
}
编译过对应的css：
.box1, .box2 {
width: 100px;
height: 100px;
}
- 混合（Mixins）
可以类比于js中的函数，sass中的混合以@mixin开头，用@include调用，也可以进行传参：
@mixin radius($radius: 20px){
border-radius: $radius;
}
.box1{
width: 100px;
height: 100px;
@include radius(); //不传参时使用默认值20px
}
.box2{
@extend .box1;
@include radius(50px); //传参时使用参数50px
}
- 颜色函数
sass中提供了一些内置的颜色函数，darken($blue, 10%)表示比$blue深10%：
$blue: blue;
.box1{
width: 100px;
height: 100px;
background-color: darken($blue, 10%);
}
除了darken，还有其他的：
*lighten($blue, 10%)
*darken($blue, 10%)
*grayscale($blue)
*complement($blue)
