http://sass-lang.com/documentation/file.SASS_REFERENCE.htmlhtml
There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS3. This means that every valid CSS3 stylesheet is a valid SCSS file with the same meaning. In addition, SCSS understands most CSS hacks and vendor-specific syntax, such as IE’s old filter syntax. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension.css3
The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Some people find this to be easier to read and quicker to write than SCSS. The indented syntax has all the same features, although some of them have slightly different syntax; this is described in the indented syntax reference. Files using this syntax have the .sass extension.web
Either syntax can import files written in the other. Files can be automatically converted from one syntax to the other using the sass-convertcommand line tool:浏览器
# Convert Sass to SCSS $ sass-convert style.sass style.scss # Convert SCSS to Sass $ sass-convert style.scss style.sass
Sass 有两种语法规则(syntaxes),目前新的语法规则（从 Sass 3开始）被称为 “SCSS”( 时髦的css（Sassy CSS）),它是css3语法的的拓展级，就是说每个语法正确的CSS3文件也是合法的SCSS文件，SCSS文件使用.scss做为拓展名。
第二种语法别成为缩进语法（或者 Sass），它受到了 Haml的简洁精炼的启发，它是为了人们能够用和css相近的可是更精简的方式来书写css而诞生的。它没有括号，分号，它使用 行缩进 的方式来指定 css 块，虽然sass不是最原始的语法，可是缩进语法将继续被支持，在缩进语法的文件以 .sass 为拓展名。sass
首先，让咱们得到Sass并搭配环境.若是你使用 OS X,那么你已经安装了Ruby. Windows 用户能够经过Windows安装程序来安装, Linux能够经过包管理(apt-get)来安装.ruby
当Ruby安装好后,你能够安装 Sass 了，运行：app
gem install sass
就安装成功了。
下面的命令，能够在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）ide
sass test.scss函数
若是要将显示结果保存成文件，后面再跟一个.css文件名。
sass test.scss test.css
SASS提供四个编译风格的选项：
* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。（用这个比较好看）
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。
生产环境当中，通常使用最后一个选项。
sass --style compressed test.sass test.css
你也可让SASS监听某个文件或目录，一旦源文件有变更，就自动生成编译后的版本。
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
SASS的官方网站，提供了一个在线转换器。你能够在那里，试运行下面的各类例子。
3、基本用法
3.1 变量
SASS容许使用变量，全部变量以$开头。
$blue : #1875e7;
div {
color : $blue;
}
若是变量须要镶嵌在字符串之中，就必须须要写在#{}之中。
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
3.2 计算功能
SASS容许在代码中使用算式：
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
3.3 嵌套
SASS容许选择器嵌套。好比，下面的CSS代码：
div h1 {
color : red;
}
能够写成：
div {
hi {
color:red;
}
}
属性也能够嵌套，好比border-color属性，能够写成：
p {
border: {
color: red;
}
}
注意，border后面必须加上冒号。
在嵌套的代码块内，可使用$引用父元素。好比a:hover伪类，能够写成：
a {
&:hover { color: #ffb3ff; }
}
3.4 注释
SASS共有两种注释风格。
标准的CSS注释 /* comment */ ，会保留到编译后的文件。
单行注释 // comment，只保留在SASS源文件中，编译后被省略。
在/*后面加一个感叹号，表示这是"重要注释"。即便是压缩模式编译，也会保留这行注释，一般能够用于声明版权信息。
/*!
重要注释！
*/
4、代码的重用
4.1 继承
SASS容许一个选择器，继承另外一个选择器。好比，现有class1：
.class1 {
border: 1px solid #ddd;
}
class2要继承class1，就要使用@extend命令：
.class2 {
@extend .class1;
font-size:120%;
}
（结果为：
.class1, .class2 {
border: 1px solid #ddd; }
.class2 {
font-size: 120%; }
4.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的实例，用来生成浏览器前缀。
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
使用的时候，能够像下面这样调用：
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
4.3 颜色函数
SASS提供了一些内置的颜色函数，以便生成系列颜色。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
4.4 插入文件
@import命令，用来插入外部文件。
@import "path/filename.scss";
若是插入的是.css文件，则等同于css的import命令。
@import "foo.css";
5、高级用法
5.1 条件语句
@if能够用来判断：
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
配套的还有@else命令：
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
5.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");
}
}
5.3 自定义函数
SASS容许用户编写本身的函数。
@function double($n) {
@return $n * 2;
}#sidebar {
width: double(5px);
}
（完）
转自：http://www.ruanyifeng.com/blog/2012/06/sass.html
更多：
http://ruby-china.org/topics/4396
http://blog.meituo.net/2011/03/27/sass-%E4%BD%BF%E7%94%A8%E4%BB%8B%E7%BB%8D/