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 3Installed 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、在线编译