SASS(Sass (Syntactically Awesome StyleSheets))是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單和可維護。
語法格式
Sass 有兩種語法格式。首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 —— 這種格式僅在 CSS3 語法的基礎上進行拓展，所有 CSS3 語法在 SCSS 中都是通用的，同時加入 Sass 的特色功能。此外，SCSS 也支持大多數 CSS hacks 寫法以及瀏覽器前綴寫法 (vendor-specific syntax)，以及早期的 IE 濾鏡寫法。這種格式以 .scss 作爲拓展名。
另一種也是最早的 Sass 語法格式，被稱爲縮進格式 (Indented Sass) 通常簡稱 "Sass"，是一種簡化格式。它使用 “縮進” 代替 “花括號” 表示屬性屬於某個選擇器，用 “換行” 代替 “分號” 分隔屬性，很多人認爲這樣做比 SCSS 更容易閱讀，書寫也更快速。縮進格式也可以使用 Sass 的全部功能，只是與 SCSS 相比個別地方採取了不同的表達方式，具體請查看 the indented syntax reference。這種格式以 .sass 作爲拓展名。
基本用法
1.SASS允許使用變量，所有變量以$開頭。
$blue : #1875e7;
div {
color : $blue;
}
如果變量需要鑲嵌在字符串之中，就必須需要寫在#{}之中。
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
2.計算功能
SASS允許在代碼中使用算式：
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
3.嵌套
SASS允許選擇器嵌套。比如，下面的CSS代碼：
div h1 {
color : red;
}
可以寫成：
div {
hi {
color:red;
}
}
屬性也可以嵌套，比如border-color屬性，可以寫成：
p {
border: {
color: red;
}
}
注意，border後面必須加上冒號。
在嵌套的代碼塊內，可以使用&引用父元素。比如a:hover僞類，可以寫成：
a {
&:hover { color: #ffb3ff; }
}
4. 註釋
SASS共有兩種註釋風格。
標準的CSS註釋 /* comment */ ，會保留到編譯後的文件。
單行註釋 // comment，只保留在SASS源文件中，編譯後被省略。
在/*後面加一個感嘆號，表示這是"重要註釋"。即使是壓縮模式編譯，也會保留這行註釋，通常可以用於聲明版權信息。
/*!
重要註釋！
*/
代碼重用
1.繼承
SASS允許一個選擇器，繼承另一個選擇器。比如，現有class1：
.class1 {
border: 1px solid #ddd;
}
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的實例，用來生成瀏覽器前綴。
@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); }
3.顏色函數
SASS提供了一些內置的顏色函數，以便生成系列顏色。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
4 插入文件
@import命令，用來插入外部文件。
@import "path/filename.scss";
如果插入的是.css文件，則等同於css的import命令。
@import "foo.css";
高級用法
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;
}
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允許用戶編寫自己的函數。
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}