sass是css的扩展语言，保留了css的特征，弥补了css的缺陷，css更加强大，优雅，多功能，在使用sass过程时，你可以嵌套，引用，定义变量，加入参数等等，下面就来介绍sass的安装和用法，看完你马上就能用，从此不再被css拖累。
一、安装
-
因为sass基础ruby语言开发，所以首先确认电脑有有没有安装了ruby，如果还没有，可以点击ruby下载安装。
-
下载安装好之后，需要查看有没有安装成功，需要打开CMD输入以下命令：
ruby -v //如安装成功会打印 ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]
- Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件，所以我们要gem源,用以下命令来查看gem源。
gem sources -l
- 如果发现没有任何东西，需要安装gem源:
gem sources -a http://rubygems.org/
- 查看是否添加成功：
gem sources -l *** CURRENT SOURCES *** http://rubygems.org/
- 然后就可以安装sass系统了。
gem install sass gem install compass//sass可以结合compass使用。
二、使用
1.在D:盘中创建项目文件untitled2， 再创建sass文件夹 创建 test.scss 文件 。
2.启动rubyCMD，找到存放 test.scss 文件夹的位置 ，输入命令：（进入到sass文件夹内）。
一下代码把test.scss文件转换为css格式的文件，文件夹内生成如下图两个文件
sass test.scss test.css
3.监听
如果如果想监听整个文件，需要回到sass的父目录，本例中是untitled2， 输入下面命令，就会自动生成一个css的文件，并且把 .scss格式的文件对应生成 .css结尾的css文件
sass --watch --style expanded sass:css //compressed为编译后的缩进格式 //以下四中均为输出样式，下面用法会详细介绍。
nested //嵌套输出
expanded //展开输出
compact //紧凑输出
compressed //.压缩输出
三、语法
1、嵌套规则
sass中可以把一套css样式嵌套到另一套样式当中，是sass出色的原因之一。父元素嵌套着子元素，层层关系，避免重复输写父元素，使得复杂的css也能在书写和阅读上更加清晰易管理。属性也可以进行嵌套。
属性嵌套 nav {
border: { //注意 border后面的 ：
style: solid;
width: 1px;
color: #ccc; }
} //样式嵌套
#main p {
color: #00ff00; width: 97%;
.redbox { background-color: #ff0000; color: #000000; }
}
编译之后：
nav{border: 1px solid #ccc;}
#main p {color: #00ff00;width: 97%; }
#main p .redbox { background-color: #ff0000; color: #000000; }
2、可以用 & 引用父元素
在写sass过程中，有时需要使用父元素，可是由于嵌套的格式，父元素嵌套着子元素，这时，可以用&来代替需要引用的父元素。
a {
&:hover { color: #ffb3ff; }
} //相当于 a:hover{color: #ffb3ff}
3、所有变量用$开头
在sass中可以定义变量，变量以美元符号开头，不在嵌套中定义的变量是全局变量，可以在任何地方使用，在嵌套中定义的变量只能在嵌套中使用。将局部变量转换为全局变量可以添加 !global
$blue : #1875e7;
div {
$height: 10px!global;
$width: 5px;
color : $blue;
width: $width;
}
4、#{ }
如果变量需要镶嵌在字符串中，要放在插值语句 #{ }里面，插值语句 #{ }可以sass中的任何地方使用。比如插值属性名，和插值属性值。
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
属性值可以是css里面的属性名，字sass中比较灵活，在定义的属性值中可以是css中的属性值，一遍我们使用。例如：
$color-red: #f00;
$border-color: green;
$side: left;//值是css属性名。
border-#{$side}-radius: 5px; //相当于border-left-radius: 5px;
5、sass还可以在代码中使用算式
这个也是sass最为出色的地方，甩css十条街，在以往的css中，计算尺寸也是个问题，比如把一个宽为100%的元素分成3分，每份根本不知怎么分配，一点都不好计算。而sass可以直接运用算式可以很轻松的解决这个问题。
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
6、sass注释
sass中有时也要使用注释，支持/* */ 与 // 的注释，而他们之间却被编译之后却会有不同的效果。
/* comment */ //会保留到编译后的文件。
单行注释:
comment //只保留在SASS源文件中，编译后被省略。
在/*后面加一个感叹号，表示这是”重要注释”。即使是压缩模式编译，也会独占一行，保留这条注释，通常可以用于声明版权信息。
/*! 重要注释！ */
四、代码的重用：
1、类的继承：用@extend;
在写css的时候，通常会遇到两个元素样式一样的情况，但是其中一个元素又添加了额外的样式，在sass中可以直接使用@extend来引用另外另外一个元素完全的样式。
.class1 {
border: 1px solid #ddd; }
.class2 {
@extend .class1;
font-size:120%; }
2、@mixin混合模式
既然可以用@extend引用一个元素的样式代码块，那会不会存在一个代码块，需要被多处使用？在写项目的过程中，肯定会有，比如flex样式，就经常重复写。在sass中，用@mixin 命令定义一个代码块， 解决了这个问题，使用@include命令调用这个代码块，使得定义好的代码块加入到项目中，避免了从复书写的麻烦和。让经常重复书写的代码块只需要写一次就好，多次被@include加到项目中。定义的代码块不会被编译，不会出现在.css文件中。
@mixin flex {
float: left;
margin-left: 10px; }
div {
@include left;
}
@mixin 强大之处不仅可以定义代码块，还可以加入一个或者多个参数，把它封装成一个“函数”，在调用的时候加入参数可以灵活多变地被调用，如果使用默认值可以不填参数项。
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
调用的时候可以根据需要加入参数：
div{
@include left(100px)
}
插入文件
@import 插入文件像css插入文件那样。
@import "path/filename.scss"; @import url(test.css); //相当于
五、高级用法
1.@if（条件）
@if就像js里面的判断语句if，判断是否符合条件，如果返回的结果是true，才会输出{}里面的代码块，否则不会输出。
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
} //编译后p {border: 1px solid; }
这个用法也可以用于自适应，判断屏幕的宽度，从而对应输出适应各种屏幕的样式代码块。
@if $container-width < 960{
width: $container-width - 300px;
background-color: red;
}
2、@else
这个也是相当于js语法里面的else语句，如果 if 语句的条件为false，则执行该代码块。@if后面可以跟多个@if else，当@if else的判断全部都为false时，左后执行@else代码块。
@if lightness($color) > 30% {
background-color: #000; }
@else {
background-color: #fff; }
3、@for循环
@for也是相当于JavaScript for 循环，可以将代码快执行指定的次数，在这个格式里面，要存在一个变量，例子中就是$i，存在一个循环的范围，$i from 1 to 10，在这个范围里面循环执行{}里面的代码快。
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; } } //编译为
.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }
4、@while循环
@while循环同样也等同于JavaScript while 循环，判断条件，符合则执行下面的代码快。
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2; }
5、@each遍历
@each等同与each（）方法，使每个匹配的元素都执行{}代码块。在@each用法里会存在一个值列表，更像是一个数组，将变量作用于数组的每一项，对应输出结果。
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
//编译后
.a{background-image: url("/image/#{$member}.jpg");}
.b{background-image: url("/image/#{$member}.jpg");}
.c{background-image: url("/image/#{$member}.jpg");}
.d{background-image: url("/image/#{$member}.jpg");}
自定义函数
在sass中还可以使用@function自定义函数，和@mixin一样，可以使用一个或者多个参数，更像javascript中的function函数，@function定义的函数可以包含多条语句，需要使用@return输出。
@function double($n) {
@return $n * 2; }
#sidebar {
width: double(5px);
} //编译后
#sidebar {
width: 10px;
}
总结
1.所有变量用$声明；
2.用&代替父元素。
3.镶嵌在属性中的变量用#{};
继承类名用： @extend .类名；
声明代码块用：@mixin 名 （变量参数） { }；
引用代码快：@include 名；
定义函数@function 函数名（变量参数）{ @return 输出语句 }
