1、什么是sass？
SASS是一种CSS的开发工具，是一种优秀的前端样式预处理器。
提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
2、安装和使用
因为sass是基于ruby的，所以我们首先要对ruby进行安装：
ruby安装配置
下载Ruby（emmm最好不要下载最新版本，不稳定？）
Window 系统下，我们可以使用 RubyInstaller 来安装 Ruby 环境；
首先，我们进入ruby官网进行对应版本的下载并进行安装：
双击 rubyinstaller-2.5.0.exe 文件，启动 Ruby 安装向导。
点击 Next，继续向导，记得勾选 Add Ruby executables to your PATH，直到 Ruby 安装程序完成 Ruby 安装为止。
检测Ruby安装是否成功
安装完成后 在命令行进行检测看是否安装成功
输入ruby -v，显示版本则表示安装成功
ruby安装成功后，我们就可以进行sass的安装了
sass安装
在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby
输入gem install sass 显示如下就说明安装成功了
下面我们来看一下sass的版本
输入
sass -v ，显示如下，可见sass已成功安装
3、简单压缩一个css文件
SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。
首先打开hbuilder创建一个名为sass的项目，在此项目下创建mysass.scss文件，在这个文件里随便写些样式，例如：
body{
margin:0;
padding:0;
}
ul{
margin:0;
padding:0;
}
li{
list-style:none;
}
接下来我们开始压缩它：
打开当前目录的命令行，输入sass -style compressed mysass.scss mysass.css,如图所示：
我们继续返回hbuilder会发现已经压缩成功了：出现了mysass.css文件和mysass.css.map文件
打开mysass.css文件 我们会看到压缩过的代码：
你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
(这里的input和output均为你自己命名的输入输出文件名，)
4、sass的基本用法
(1) 变量
sass允许使用变量，所有变量以$开头。
定义一个名为“timi”的变量，让它的值为灰色：
/*jianting.scss*/
$timi:#eeeeee;
div{
color:$timi;
}
保存后，我们可以启动sass的监听，在文件目录下打开命令行，输入sass --watch jianting.scss:jianting.css实时监听（改变scss文件代码并保存后，css文件同步更新）
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
定义左边圆角为5px：
$side : left;
div {
border-#{$side}-radius: 5px;
}
（2）计算功能
sass允许在代码中使用算式：
$var:40;
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
（3） 嵌套
sass允许选择器嵌套。比如，下面的css代码：
div h1 {
color : red;
}
可以写成：
div {
h1{
color:red;
}
}
属性也可以嵌套，比如border-color属性，可以写成：
p {
border: {
color: red;
}
}
注意，border后面必须加上冒号。
在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：
a {
&:hover { color: #ffb3ff; }
}
（4）注释
sass共有两种注释风格。
标准的CSS注释 /* comment */ ，会保留到编译后的文件。
单行注释 // comment，只保留在SASS源文件中，编译后被省略。
在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
/*!
重要注释！
*/
5、代码的重用
（1）继承(用@extend)
sass允许一个选择器，继承另一个选择器。比如，现有class1：
.class1 {
border: 1px solid #eee;
}
class2要继承class1，就要使用@extend命令：
.class2 {
@extend .class1;
font-size:120%;
}
（2） Mixin
Mixin有点像C语言的宏（macro），是可以重用的代码块。
使用@mixin命令，定义一个代码块。
@mixin left {
float: left;
margin-left: 10px;
}
使用@include命令，调用这个mixin。
div {
@include left;
}
mixin的强大之处，在于可以指定参数和缺省值。
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
使用的时候，根据需要加入参数：
div {
@include left(20px);
}
下面是一个mixin的实例，我们需要body的宽高都重用变量MyWidth和MyHeight的：
$MyWidth:100px;
$MyHeight:100px;
@mixin timi($w,$h){
width:$w;
height:$h;
}
body{
@include timi($MyWitdh,$MyHeight);
sass文件：
（3） 插入文件
@import命令，用来插入外部文件。
@import "path/filename.scss";
如果插入的是.css文件，则等同于css的import命令。
@import "bianliang.css";
6、高级用法
（1）条件语句
@if可以用来判断：
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
配套的还有@else命令：
div{
@if 1 + 1 == 2 {
border: 1px solid;}
@else {
border: 5px solid;
}
}
（2） 循环语句
sass支持for循环：
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
也支持while循环：
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each命令，作用与for类似：
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
（3）自定义函数
sass允许用户编写自己的函数：
$ttt : 5;
@function Timi($t){
@return $t + 2;
}
body{
margin: Timi($ttt)px;
}
emmm，基本上sass的一些小点点差不多练习到了，基本的使用可能也许maybe差不多。。。emmmm下来还是多练习吧~over
