学习资料：
sass语法 http://www.w3cplus.com/sassguide/syntax.html
Sass http://sass.bootcss.com/docs/sass-reference/
http://www.ruanyifeng.com/blog/2012/06/sass.html
一、什么是SASS
SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
二、安装和使用
Sass依赖于ruby环境，所以装sass之前先确认装了ruby。先导官网下载个ruby。在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境。安装好ruby后，然后安装Sass。（mac自带）
输入一下命令：
gem install sass
这样，sass就可以使用了。
三、基本使用
Sass 有两种语法。 第一种被称为 SCSS (Sassy CSS)，是一个 CSS3 语法的扩充版本；二种比较老的语法成为缩排语法（或者就称为 "Sass"）， 提供了一种更简洁的 CSS 书写方式。使用 sass-convert 命令实现两者相互转换。本文介绍的是Scss用法。
# 将 Sass 转换为 SCSS $ sass-convert style.sass style.scss # 将 SCSS 转换为 Sass $ sass-convert style.scss style.sass
3.1 注释
SASS共有两种注释风格。标准的CSS注释 /* comment */ ，会保留到编译后的文件。单行注释 // comment，只保留在SASS源文件中，编译后被省略。在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
3.2 变量
SASS可以使用变量，所有变量以$开头。如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。变量后面添加 !default ，表示该值是默认值。
$left: left;
div{
float: $left;
margin-#{$left}: 20px;
}
多个变量
多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。
/* list */
$linkColor: #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值
a{
color:nth($linkColor,1);
&:hover{
color:nth($linkColor,2);
}
}
/* map */
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $key, $value in $headings {
#{$key} {
font-size: $value;
}
}
编译为：
/* list */
a { color: #08c; }
a:hover { color: #333; }
/* map */
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
3.3 嵌套
SASS可以使用选择器嵌套。
div {
img{
width: 50px;
}
}
//编译为
div img{ width: 50px; }
属性也可以嵌套，比如 border-color 属性。
div{
border: {
color: red;
}
}
//编译为
div{ border-color: red; }
注意：border后面必须加上冒号。
在嵌套的代码块内，可以使用 & 引用父元素。比如 a:hover 伪类。
a{
&:hover{
color: #ccc;
}
}
//编译为
a:hover{ color: #ccc;}
3.4 @at-root
sass3.3.0中新增的功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。适用 BEM 命名方式（如： .block 、.block__element 、.block--modifier）、@keyframe。先看如果使用嵌套写法是什么样的情况。
.block {
color: red;
#{&}_element {
color:blue;
}
#{&}--modifier {
color: orange;
}
}
编译为
.block { color: red; }
.block .block_element { color: blue; }
.block .block--modifier { color: orange; }
明显编译出来的CSS并不是我们想要的代码。 @at-root 可以实现上面 BEM 的特性。
.block {
color: red;
@at-root #{&}_element {
color:blue;
}
@at-root #{&}--modifier {
color: orange;
}
}
编译为：
.block { color: red; }
.block_element { color: blue; }
.block--modifier { color: orange; }
3.5 计算
SASS允许在代码中使用算式。这里就不做描述了。
四、代码重用
4.1 继承
SASS通过 @extend 命令使一个选择器class2继承另一个选择器class1
.class1{
width: 50px / 2;
height: 50px + 50px;
}
.class2{
@extend .class1;
height: 50px;
}
编译为：
.class1, .class2 { width: 50px / 2; height: 100px; }
.class2 { height: 50px; }
编译后以群组选择器方式显示；如果选择器class2不需要选择器class1的某个属性，可添加该属性进行覆盖，并单独显示出来。（看文档的时候总是将群组选择的 “,” 看成 “.”，误认为后代选择器了，所以写出来。）
4.2 Mixin
Sass中使用 @mixin 声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值 $opacity:50 ，如果一个参数可以有多组值，如 box-shadow、transition 等，那么参数则需要在变量后加三个点表示，如 $variables... 。使用 @mixin 命令，定义一个代码块。再使用 @include 命令，调用这个 @mixin。
@mixin opacity($opacity:50) {
opacity: $opacity / 100;
filter: alpha(opacity=$opacity);
}
.opacity{
@include opacity;
}
.opacity-80{
@include opacity(80);
}
编译为：
.opacity { opacity: 0.5; filter: alpha(opacity=50); }
.opacity-80 { opacity: 0.8; filter: alpha(opacity=80); }
4.3 函数
Sass定义了很多函数可供使用，当然你也可以自定义函数，以 @fuction 开始。实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。
$color: red;
@function rem($rem){
@return $rem / 10 + rem;
}
.box{
foot-size: rem(20);
color: lighten($color, 20%);
}
编译为：
.box { foot-size: 2rem; color: #ff6666; }
五、高级使用
5.1 条件语句
@if可以用来判断：
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
编译为：
p { border: 1px solid; }
@if 声明可以由几个 @else if语句，一个 @else 声明组成。
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
编译为：
p { color: green; }
5.2 循环语句
@for循环：from x to y： 不含y；from x through y：包含y。
@for $i from 1 to 3 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
编译为：
.border-1 { border: 1px solid blue; }
.border-2 { border: 2px solid blue; }
.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }
@each
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
.#{$animal}-icon {
background-image: url(‘/images/#{$animal}.png‘);
}
}
编译为：
.puma-icon { background-image: url("/images/puma.png"); }
.sea-slug-icon { background-image: url("/images/sea-slug.png"); }
.egret-icon { background-image: url("/images/egret.png"); }
.salamander-icon { background-image: url("/images/salamander.png"); }
@while
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
编译为：
.item-6 { width: 12em; }
.item-4 { width: 8em; }
.item-2 { width: 4em; }
六、编译
在命令行中运行 Sass 进行编译,只要输入：
sass input.scss output.css
命令 Sass 监视文件的改动并更新 CSS ：
sass --watch input.scss:output.css
如果你的目录里有很多 Sass 文件，你还可以命令 Sass 监视整个目录：
sass --watch app/sass:public/stylesheets
在命令行后面添加 --style 编译格式 可以选择编译方式。
编译方式有四种：
nested（默认）：选择器与属性等单独占用一行，缩进量与 Sass 文件中一致，每行的缩进量反映了其在嵌套规则内的层数。当阅读大型 CSS 文件时，这种样式可以很容易地分析文件的主要结构；
expanded：选择器、属性等各占用一行，属性根据选择器缩进，而选择器不做任何缩进；
compact：每条 CSS 规则只占一行，包含其下的所有属性。嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符；
compressed：删除所有无意义的空格、空白行、以及注释，力求将文件体积压缩到最小，同时也会做出其他调整，比如会自动替换占用空间最小的颜色表达方式。
编译错误，命令行中会报错，并提示错误代码行数。