虽然sass出了很久了，但一直没有使用，因为在前公司没有使用编译工具，只有自己使用的话会怕导致不好维护（其实也是懒的借口）。
最近公司的一个小项目，我开始了sass的使用。其实一开始用sass，我也是拒绝的，因为没有使用过，而项目稍微有点紧，怕不熟悉而影响进度。好吧，说来也惭愧，前端入坑已几年，竟然还没有用过这东西，哭！然而！使用之后duangduang的却发现，这玩意上手简直及其简单，可能也是我只是使用了比较简单的功能吧。之前试用过less，感觉还是又挺多东西要记的。话不多扯，下面自我总结一番sass的基本用法：
1.嵌套
有两种嵌套，一种是选择器嵌套，一种是属性嵌套
选择器嵌套：
.parent {
width: 100px;
.sub {
color: #fff;
}
}
选择器嵌套：
div {
border {
style: solid;
color: #fff;
}
}
个人觉得选择器嵌套可以少用，因为css选择器层级过多会影响解析速度。类似上面的嵌套，可以直接写一个parent-sub的类名，直接为该类名指定样式。
2.变量
用$符号，可以将某个值声明为一个变量，例如在一个网站中，可以把主题颜色设置成一个变量，主题需要更换的时候只需更改变量，无需更改所有用到主题颜色的元素。
$theme-color: #0f0;
3.计算
可能某个元素的宽度要依赖于另外一个来计算，就可以用这个功能啦
a {
width: 2*2px;
height: 2+$var;
}
4.继承
对于某些有部分类似样式的选择器来说是很有用的。subclass继承了class：
.class {
color: #000;
}
.subclass {
@extend .class;
width: 10px;
}
5.Mixin
类似于函数功能，可以将一段样式封装起来，甚至可以传参数，然后用@include引入。这个相当有用哇，例如可以定义一个按钮，把color，border-radius，width，padding的值都当作参数传入，这样 写的时候只要写Mixin和参数值的引用就行了。而且参数支持缺省值哦，相当于函数的默认参数值。
@mixin test($value:10px) {
width: $value;
height: 10px;
}
div {
@include test(20px);
}
6.配合compass使用
compass是使用sass的一个工具，在sass的基础上，封装了一系列有用的模块模板，你也可以使用compass来批量处理sass文件，监听文件更改。使用compass可以让你使用很多预定义好的Mixin，会有助于提高编写效率。例如
div {
-webkit-animation: test;
-moz-animation: test;
animation: test;
}
引入compass/animation后可以写成
div {
@include animation(test);
}