SASS - 成熟、稳定、强大的 CSS 扩展语言解析器。
Sass 是一个 CSS 的扩展，它在 CSS 语法的基础上，允许您使用变量 (variables), 嵌套规则 (nested rules), 混合 (mixins), 导入 (inline imports) 等功能，令 CSS 更加强大与优雅。
一、特色
- 完全兼容 CSS3
- 在 CSS 语言的基础上增加变量(variables)、嵌套 (nesting)、混合 (mixins) 等功能
- 通过函数进行颜色值与属性值的运算
- 提供 控制指令等高级功能
- 自定义输出格式
二、使用 Sass (Using Sass)
使用哪种方式都需要首先安装 Sass gem ：
gem install sass
如果你使用的是Windows ，你可能首先需要安装Ruby 。
如果要在命令行中运行 Sass ,只要使用
sass input.scss output.css
你还可以使用Sass命令来监视某个Sass文件的改动，并自动编译来更新 CSS ：
sass --watch input.scss:output.css
如果你的目录里有很多 Sass 文件，你也可以使用Sass命令来监视整个目录：
sass --watch app/sass:public/stylesheets三、Sass 语法
1. 使用变量
使用前缀$来声明，与less有区别(less使用前缀@)
//sass
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
//编译后css
nav {
width: 100px;
color: #F90;
}2. 嵌套规则
css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又一遍地写同一个ID：
#main left h1 { color: #000 }
#main left p { margin-bottom: 12px }
#main right { background-color: #ccc }这时就可以使用嵌套规则，如下：
#main {
left {
h1 {
color: #000;
}
p {
margin-bottom: 12px;
}
}
right {
background-color: #ccc;
}
}
2-1. 父选择器的标识符&
一般情况下，sass在解开一个嵌套规则时就会把父选择器（#content）通过一个空格连接到子选择器的前边（article和aside）形成（#content article和#content aside）。这种在CSS里边被称为后代选择器，因为它选择ID为content的元素内所有命中选择器article和aside的元素。但在有些情况下你却不会希望sass使用这种后代选择器的方式生成这种连接。
比如说，下面这种情况sass就无法正常工作：
article a {
color: blue;
:hover { color: red }
}可改成以下：
article a {
color: blue;
&:hover { color: red }
}在<body>标签上添加一个ie的类名，为这种情况编写特殊的样式如下：
//sass
#content aside {
color: red;
body.ie & { color: green }
}
//编译后css
#content aside {color: red};
body.ie #content aside { color: green }2-2. 群组选择器的嵌套
.container h1, .container h2, .container h3 { margin-bottom: .8em }.container {
h1, h2, h3 {margin-bottom: .8em}
}2-3. 子组合选择器和同层组合选择器：>、+和~;
//sass
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}
//编译后的css
article ~ article {
border-top: 1px dashed #ccc;
}
article > section {
background: #eee;
}
article dl > dt {
color: #333;
}
article dl > dd {
color: #555;
}
nav + article {
margin-top: 0;
}2-4. 嵌套属性;
在sass中，除了CSS选择器，属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕，但是要反复写border-style`border-widthborder-color以及border-*等也是非常烦人的。在sass中，你只需敲写一遍border`：
//sass
header {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
//编译后css
header {
border: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
}3.混合器
如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体），那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。
混合器使用@mixin标识符定义, 通过@include 来使用:
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}//sass
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
//sass最终生成的css
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}给混合器传参：
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}//sass
a {
@include link-colors(blue, red, green);
}
//Sass最终生成的css是：
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }4.继承
使用sass的时候，最后一个减少重复的主要特性就是选择器继承。基于Nicole Sullivan面向对象的css的理念，选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现
//通过选择器继承继承样式
.error {
border: 1px red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
5、函数指令
Sass 支持自定义函数，并能在任何值或脚本上下文中使用。例如
//sass
$grid-width: 50px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
//生成css
#sidebar {
width: 290px;
}#sidebar { width: grid-width(5); }可改成以下：
#sidebar { width: grid-width($n: 5); }6、输出格式
Sass 提供了四种输出格式，可以通过:style 选项 选项设定，或者在命令行中使用 --style 选项。
6.1 :nested nested（嵌套）格式是 Sass 默认的输出格式，
6.2:expanded expanded（扩展）格式更像是手写的CSS样式，每个属性和规则都独占用一行。在规则之内的属性缩进的，但规则没有任何特殊的缩进
6.3 :compact compact（紧凑）格式比起nested（嵌套）或expanded（扩展）格式占据更小的空间。
6.4 :compressed compressed（压缩）格式占用尽可能小的空间