Sass，Syntactically Awesome StyleSheets，语法样式表。
Sass有两种实现，ruby-sass与lib-sass，前者用ruby实现，后者用C/C++实现。
一、Sass的安装方案
1、标准安装
A、先安装Ruby，再安装Sass。
gem install sass
B、查看版本
sass -v
C、查看帮助(3.5.1)
sass -h
D、安装compass
gem install compass
compass是sass的工具库，在sass的基础上封装了一系列有用的模板和模块，补充sass的功能，compass和sass的关系类似于jQuery和JavaScript的关系。
E、检验compass是否安装成功
compass -v
2、借助npm安装
二、创建Sass文件
1、sass文件类型
- 以xxx.sass结尾的文件，不使用花括号和分号；
- 以xxx.scss结尾的文件，和xxx.css文件一样使用花括号和分号。scss(Sassy CSS)，是一个css3语法的扩充版本，是Sass3的新语法格式。
2、温馨提示
- 在创建Sass文件时，记得将文件编码设置为“utf-8”；
- 如果文件以.sass结尾，请用旧语法书写；
- 如果文件以.scss结尾，请用新语法书写，千万不要混用混写；
- 配置好ruby的环境变量，否则会导致编译失败；
- 文件目录请用英文，不要用中文。
3、文件引用
一般情况下，书写sass文件，编译成css后，用link引用，而不是直接引入.scss文件。当然，如果结合webpack使用，那就另当别论了，具体引用方式请看下文。
三、Sass的语法（3.5.1）
1、注释
//单行注释
单行注释，不会出现在编译后的css文件中。
/*多行注释*/
多行注释，只会出现在编译后的代码格式为expanded的css文件中。
/*!强制注释*/
强制注释，会出现在任何代码格式的css文件中。
2、嵌套
嵌套不要超过3层。
A、选择器嵌套
div{
margin: 100px;
em{
font-weight: normal;
color: red;
}
}
B、属性嵌套
p{
border:{
color: blue;
}
}
C、伪类嵌套
a{
color: orange;
&:hover{
color: blue;
}
}
3、变量
$blue : #1875e7;
div {
color: $blue;
}
如果变量需要镶嵌在字符串之中，就必须写在#{}之中。
$direction: left;
div {
border-#{$direction}-radius: 5px;
}
4、作用域(尽量少用)
变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明。
A、降低优先级
!default
$blue : #1875e7 !default;
div {
color: $blue;
}
B、提升优先级
!global
$blue : #1875e7;
div {
$blue : #00f !global;
color: $blue;
}
除非元素自身重置变量，才能覆盖!global的变量。
5、数据类型
- 数字：1, 2, 13, 10px
- 字符串：有引号字符串与无引号字符串，"foo", 'bar', baz
- 颜色：blue, #04a3f9, rgba(255,0,0,0.5)
- 布尔型：true, false
- 空值：null
- 数组 (list)：用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
- maps：相当于JavaScript的object，(key1: value1, key2: value2)
6、计算
$num: 5;
div {
margin: (14px/2);
top: 50px + 100px;
right: $num * 10%;
}
7、数组
在Sass的列表中，你可以使用空格符或者逗号作为列表项与列表项之间的分隔符。Sass中的列表索引值和JavaSctript数组中的索引值不一样，它是从1开始，而不是从0开始。
$list: a, b, c, d, e, f
//scss
$list:(#f00,5,"normal");
div {
color: nth($list,1);
font-size: nth($list,2) * length($list) + px;
font-weight: nth($list,3);
} //css
div {
color: #f00;
font-size: 15px;
font-weight: "normal";
}
8、代码重用之继承@extend
.parent{
font-size: 15px;
color: blue;
}
.child{
@extend .parent;
border: 1px solid #f00;
}
好处：可以继承所有样式，编译出来的css会将所有选择器合并在一起，代码比较干净。继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。
弊端：不能传参。
9、代码重用之占位符%
%placeholder声明的代码，如果不被@extend调用，就不会产生任何代码，只是静静的躺在你的某个SCSS文件中。
%mt5 {
margin-top: 5px;
}
%pt5 {
padding-top: 5px;
}
.btn {
@extend %mt5;
@extend %pt5;
}
占位符和继承相似，通过@extend调用的占位符，编译出来的代码会将相同的代码合并在一起。
10、代码重用之混合宏@mixin
A、无参
@mixin eleLeft{
float: left;
margin-left: 5px;
}
div{
@include eleLeft;
}
B、单参
@mixin eleLeft($val: 5px){
float: left;
margin-left: $val;
}
div{
@include eleLeft(10px);
}
C、可枚举多参
@mixin rounded($vert, $horz, $num: 10px) {
margin-#{$vert}: $num;
padding-#{$horz}: $num;
}
div {
@include rounded(top, left);
}
p {
@include rounded(top, left, 5px);
}
D、不可枚举参数
当混合宏传的参数过多时，可以使用参数“...”来替代。
@mixin box-shadow($shadow...) {
@if length($shadow) >= 1 {
box-shadow: $shadow;
} @else {
$shadow: 0 0 4px rgba(0,0,0,.3);
box-shadow: $shadow;
}
}
.block {
@include box-shadow;
}
.hidden {
@include box-shadow(inset 0 0 1px rgba(red,.5),0 0 2px rgba(red,.25));
}
好处：可以传参数；
弊端：编译出来的css相同代码不会合并。比如.div和.p内部样式相同，但是分开输出了。如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余。
11、条件语句
$bg-color: black;
@if $bg-color == black {
background-color: #000;
} @else {
background-color: #fff;
}
12、循环语句
A、for循环
a.1、$i取值范围只包含start，不包含end。
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
a.2、$i取值范围既包含start，也包含end。
@for $i from 1 through 3 {
.tab-#{$i} { width: 2rem * $i; }
}
B、while循环
$i: 6;
@while $i > 0 {
.item-#{$i} {
width: 2px * $i;
}
$i: $i - 2;
}
C、each循环
@each $item in a, b, c, d {
.bg-#{$item} {
background-image: url("/image/#{$item}.jpg");
}
}
13、相关函数
A、三元条件函数
if($condition,$if-true,$if-false)
B、颜色函数
C、数组函数
D、自定义函数
@function double($n) {
@return $n * 2;
}
div {
width: double(5px);
}
14、引用外部文件
A、顶部导入
@import "grid";
@import "grid.scss";
当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件，sass局部文件的文件名规定以下划线开头。
如果需要导入SCSS或者Sass文件，但又不希望将其编译为CSS，只需要在文件名前添加下划线，这样会告诉Sass不要编译这些文件，但导入语句中却不需要添加下划线。
B、内部导入
有一个名为_blue-theme.scss的局部文件，内容如下：
aside {
background: blue;
color: white;
}
给main.scss导入某个css规则
.blue-theme {
@import "blue-theme"
}
温馨提示：不可以在混合指令或控制指令中嵌套@import。
C、css文件导入
@import "cssfile.css";
@import "cssfile" screen;
@import "http://cssfile.com/bar";
@import url(cssfile);
sass兼容原生的css，所以它也支持原生的CSS@import。如果不想造成浏览器额外下载，可以写一个css文件，然后命名为.scss文件，再导入。
15、如何使用compass
四、Sass的编译方案
1、命令行实现编译
A、生成css文件
sass sassfile.scss
B、单文件转换
sass sassfile.scss cssfile.css
C、单文件监听
sass --watch sassfile.scss:cssfile.css
D、监听文件夹sass/main中所有Sass文件，并自动编译为css，放到dist/css目录下。
sass --watch sass/main:dist/css
--sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。
E、4种编译风格
e.1、嵌套式，它是默认值。
sass --style nested sassfile.scss cssfile.css
.box{
width:250px;
height:100px;
background:red; }
.left{
float:left;
width:50px; }
.right{
float:right; }
e.2、展开式
sass --style expanded sassfile.scss cssfile.css
.box{
width:250px;
height:100px;
background:red;
}
.left{
float:left;
width:50px;
}
.right{
float:right;
}
e.3、紧凑式，一行一行显示。
sass --style compact sassfile.scss cssfile.css
.box { width:250px; height:100px; background:red; }
.left { float:left; width:50px; }
.right { float:right; }
e.4、压缩式，常用于生产环境。
sass --style compressed sassfile.scss cssfile.css
.box{width:250px;height:100px;background:red;}.left{float:left;width:50px;}.right{float:right;}
2、借助sublime完成编译
Sass
Sass Build：ctrl + b，编译。
SublimeOnSaveBuild：ctrl + s，保存文件的时候自动编译。
在sublime中安装以上3个插件，即可实现自动编译。
新建一个scss文件，第一次保存编译的时候，sublime会提示SASS和SASS-Compressed两个选项。
- SASS：编译成普通的css文件，默认不压缩；
- SASS-Compressed：编译成压缩格式的css文件。
假设被编译文件是demo.scss，则会在当前目录默认生成demo.css文件和demo.css.map文件(用于调试)。
如果希望demo.scss和demo.css分别在不同文件夹，修改css文件默认生成目录，这里提供两种方式。
//方案A
通过Sublime Text -> Tools -> Build System -> New Build System，自定义规则。 //方案B
Sublime Text -> Preferences -> Browse Packages，打开Packages文件夹，进入Sublime Text 3\Installed Packages文件夹；
找到SASS Build.sublime-package压缩包，用winrar打开；
找到SASS - Compressed.sublime-build和SASS.sublime-build文件，用sublime打开他们；
把这两个文件中的 "$file:${file_path}/${file_base_name}.css" 改成 "$file:${file_path}/../css/${file_base_name}.css"。
5、在线编译