1、sass的安装：
（1）下载安装Ruby，记得安装的时候勾选第二项，
（2）打开控制面板gem install sass（人品好的话，一下子就能安装成功)
（3）如果（2）安装不成功进行一下步骤：gem sources -remove htpps://rubygems.org/
gem sources -a http://gems.ruby-china.org
gem sources -l
gem install sass
2、sass的编译
(1)下载安装koala
(2)打开koala把需要编译的整个项目文件夹直接拖进去，选择输出路径，并且可以在设置里面选择输出的编译格式，
* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。
3、引入sass文件
引入sass文件其实还是引入的css文件，所以需要在html页面引入编译好的css文件
4、编写sass文件
（1）在头部加入@charset"utf-8"
（2）用$声明变量:css与sass的最大的区别就是sass里面可以声明变量，从而减少了代码的冗余，
声明方式:$变量名：值 ($40px)
调用方式:$width;
编译出来：40px;
(3）不传参的混合宏 @mixin ：混合宏就是将一堆经常重复使用的代码块放在一起，
声明例如：@mixin margin_style{ margin-top:20px;margin-left:30px;}
调用方式:@include margin_style
编译出来：margin-top:20px;margin-left:30px;
不足：调用混合宏编译出来的css代码不会合并，使得代码变得臃肿冗余
（4）传参的混合宏:
声明方式：@mixin margin_style($style,$value){ margin-#{style}:$vaule}
（也可以在（）里面给他默认值，如果调用的时候没有给他值就是用默认值）
调用方式:@include margin_style(top,20px)
编译出来：margin-top:20px;
（5）扩展/继承：如果有一个clss具有某些css样式了，但是另一个clsaa也需要这些样式，就可以继承前面的css样式
使用方法 @extend .需要继承的class
不足：如果基类，并不存在于html中时，不管调用没调用，在编译的时候都会将他的css都将产生基类对应的样式代码
（6）占位符：class中没有这个css样式,但是后面经常用到了用到了，就可以把它写成一个单独的样式里面去，然后让其他的class去继承
使用方法：%名字{}
调用方法：@extend %名字
（7）if指令：@if @else
（8）for循环：
@for $i from <start> through <end>
@for $i from <start> to <end>
$i 表示变量
start 表示起始值
end 表示结束值
（这两个的区别是关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数。）
(9)while循环 ：while 循环条件
(10)字符串函数：
unquote($string)：删除字符串中的引号；
quote($string)：给字符串添加引号。
To-upper-case()将小写字母转换成大写字母
to-lower-case（）将大写转换成小写
(11)引入：
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
(12)@media：可以嵌套使用
@media screen {
.sidebar {
@media (orientation: landscape) {
500px;
}
}
}
(13)@extend 是用来扩展选择器或占位符
(14)@at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root。
(15)@debug 在 Sass 中是用来调试的，当你的在 Sass 的源码中使用了 @debug 指令之后，Sass 代码在编译出错时，在命令终端会输出你设置的提示 Bug:
(16)@warn 和 @debug 功能类似，用来帮助我们更好的调试 Sass
(17)@error 和 @warn、@debug 功能是如出一辙。