CSS是用来开发网页样式，为CSS加入编程元素，这被叫做"CSS预处理器"（css preprocessor）
SASS (Syntactically Awesome StyleSheets)是一种CSS的开发工具，可以用它来定义一套新的语法规则和函数，以加强和提升CSS。通过这种新的编程语言，可以使用最高效的方式，以少量的代码创建复杂的设计。
1、嵌套
如果要写一大串指向页面中同一块的样式时，css需要重复写选择器，一遍又一遍地写同一个ID：
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { ">而sass只写一遍，嵌套规则块。使样式可读性更高
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
2、变量
你可以把颜色值存储在变量中，然后用于整个网站的设计。
而且极大地确保了整个设计项目的可用性和一致性。
实用的：结构变量
$pageWidth: 100%; $containerWidth: 960px;
描述的：颜色变量
$grey: #E3E3E3;
$blue: #1f605b;
3、混合宏
混合宏是小的代码片段（类似局部），你可以在项目中任何需要的地方，通过@include来复用它们。
（1）不带参数混合宏：
在 Sass 中，使用“@mixin”来声明一个混合宏。如：
@mixin border-radius{
-webkit-border-radius: 5px;
border-radius: 5px;
}
（2）带参数混合宏：
除了声明一个不带参数的混合宏之外，还可以在定义混合宏时带有参数，如：
@mixin border-radius($radius:5px){
-webkit-border-radius: $radius;
border-radius: $radius;
}
（3）复杂的混合宏：
@mixin box-shadow($shadow...) {
@if length($shadow) >= 1 {
@include prefixer(box-shadow, $shadow);
} @else{
$shadow:0 0 4px rgba(0,0,0,.3);
@include prefixer(box-shadow, $shadow);
}
}
4、数学函数
在样式表中使用数学函数。这在创建不同大小的网格时是特有用的，或者可以为实现更好的动态响应式设计。
5、其他
如隐藏注释，占位符选择器，数据类型，颜色操作，变量的默认值，扩展等。