一、語法格式
Sass 有兩種語法格式。首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 —— 這種格式僅在 CSS3 語法的基礎上進行拓展，所有 CSS3 語法在 SCSS 中都是通用的，同時加入 Sass 的特色功能。此外，SCSS 也支持大多數 CSS hacks 寫法以及瀏覽器前綴寫法 (vendor-specific syntax)，以及早期的 IE 濾鏡寫法。這種格式以 .scss 作爲拓展名。
另一種也是最早的 Sass 語法格式，被稱爲縮進格式 (Indented Sass) 通常簡稱 "Sass"，是一種簡化格式。它使用 “縮進” 代替 “花括號” 表示屬性屬於某個選擇器，用 “換行” 代替 “分號” 分隔屬性，很多人認爲這樣做比 SCSS 更容易閱讀，書寫也更快速。縮進格式也可以使用 Sass 的全部功能，只是與 SCSS 相比個別地方採取了不同的表達方式，具體請查看 http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html。這種格式以 .sass 作爲拓展名。其實有另一種預編譯語法stylus，也是採用的縮進格式，這種語法“冒號”可以用空格代替，這幾介紹只是作爲了解知識。
此文即將介紹的是第一種格式，即.scss文件格式的用法
二、css功能拓展
-
嵌套、選擇器
示例：/* Sass 允許將一套 CSS 樣式嵌套進另一套樣式中，內層的樣式將它外層的選擇器作爲父選擇器 * 嵌套功能避免了重複輸入父選擇器，而且令複雜的 CSS 結構更易於管理 * / #main p { color: #00ff00; width: 97%; &:hover { text-decoration: underline; } // 有時也需要直接使用嵌套外層的父選擇器,可以用 & 代表嵌套規則外層的父選擇器 body.firefox & { font-weight: normal; } &-sidebar { border: 1px solid; } .redbox { background-color: #ff0000; color: #000000; // 有些 CSS 屬性遵循相同的命名空間 (namespace)，比如 font-family, font-size, font-weight 都以 font 作爲屬性的命名空間。 font: { //Sass 允許將屬性嵌套在命名空間中 family: fantasy; size: 30em; weight: bold; } } }
三、 註釋 /* */ 與 // (Comments: /* */ and //)
Sass 支持標準的 CSS 多行註釋 /* */，以及單行註釋 //，前者會 被完整輸出到編譯後的 CSS 文件中，而後者則不會，例如：
$version: "1.2.3";
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body { color: black; }
// 插值語句 (interpolation) 也可寫進多行註釋中輸出變量值
/* This CSS is generated by My Snazzy Framework version #{$version}. */
// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }
編譯爲：
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
/* This CSS is generated by My Snazzy Framework version 1.2.3. */
body {
color: black; }
a {
color: green; }
將 ! 作爲多行註釋的第一個字符表示在壓縮輸出模式下保留這條註釋並輸出到 CSS 文件中，通常用於添加版權信息。
四、 SassScript
在 CSS 屬性的基礎上 Sass 提供了一些名爲 SassScript 的新功能。 SassScript 可作用於任何屬性，允許屬性使用變量、算數運算等額外功能。
4.1 變量 $ (Variables:) $
SassScript 最普遍的用法就是變量，變量以美元符號開頭，賦值方法與 CSS 屬性的寫法一樣：
- 變量支持塊級作用域，嵌套規則內定義的變量只能在嵌套規則內使用（局部變量），不在嵌套規則內定義的變量則可在任何地方使用（全局變量）。將局部變量轉換爲全局變量可以添加
!global聲明 - 可以在變量的結尾添加
!default給一個未通過!default聲明賦值的變量賦值，此時，如果變量已經被賦值，不會再被重新賦值，但是如果變量還沒有被賦值，則會被賦予新的值。 - 變量是 null 空值時將視爲未被
!default賦值。
// 一般設置全局變量方式
$height: 40px;
$content: "First content";
// $content: null;
$content: "Second content?" !default;
$new_content: "First time reference" !default;
#main {
$width: 5em !global;
width: $width;
height: $height;
content: $content;
new-content: $new_content;
}
#sidebar {
width: $width;
}
編譯爲：
#main {
width: 5em;
height: 40px;
content: "First content";
// content: "Second content?";
new-content: "First time reference";
}
#sidebar {
width: 5em;
}
4.2 數據類型（Data Types）
- 數字，
1, 2, 13, 10px - 字符串，有引號字符串與無引號字符串，
"foo", 'bar', baz - 顏色，
blue, #04a3f9, rgba(255,0,0,0.5) - 布爾型，
true, false - 空值，
null - 數組 (list)，用空格或逗號作分隔符，
1.5em 1em 0 2em, Helvetica, Arial, sans-serif - maps, 相當於 JavaScript 的 object，
(key1: value1, key2: value2)
SassScript 也支持其他 CSS 屬性值，比如 Unicode 字符集，或 !important 聲明。然而Sass 不會特殊對待這些屬性值，一律視爲無引號字符串。
4.2.1 字符串（String）
SassScript 支持 CSS 的兩種字符串類型：有引號字符串 (quoted strings)，如 "Lucida Grande" 'http://sass-lang.com'；與無引號字符串 (unquoted strings)，如 sans-serif bold，在編譯 CSS 文件時不會改變其類型。只有一種情況例外，使用 #{} (interpolation) 時，有引號字符串將被編譯爲無引號字符串，這樣便於在 mixin 中引用選擇器名：
@mixin firefox-message($selector) {
body.firefox #{$selector}:before {
content: "Hi, Firefox users!";
}
}
// .header 作爲一個字符串參數傳入
@include firefox-message(".header");
編譯爲
body.firefox .header:before {
content: "Hi, Firefox users!"; }
4.3 運算 (Operations)
4.3.1. 數字運算 (Number Operations)
SassScript 支持數字的加減乘除、取整等運算 (+, -, *, /, %)，如果必要會在不同單位間轉換值；()可以改變運算次序，與四則運算法則基本相同；關係運算 <, >, <=, >= 也可用於數字運算，相等運算 ==, != 可用於所有數據類型。
以下三種情況 / 將被視爲除法運算符號：
- 如果值，或值的一部分，是變量或者函數的返回值
- 如果值被圓括號包裹
- 如果值是算數表達式的一部分
p {
font: 10px/8px; // Plain CSS, no division
$width: 1000px;
width: $width/2; // Uses a variable, does division
width: round(1.5)/2; // Uses a function, does division
height: (500px/2); // Uses parentheses, does division
margin-left: 5px + 8px/2px; // Uses +, does division
}
編譯爲
p {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px; }
ps:如果需要使用變量，同時又要確保 / 不做除法運算而是完整地編譯到 CSS 文件中，只需要用 #{} 插值語句將變量包裹。
4.3.2 字符串運算
+ 作爲連接符 運算結果順從 +號 左側的類型，即左側爲包含引號的字符串則返回帶引號的串，不包含即返回不帶引號的串 注意：運算表達式與其他值連用時，用空格做連接符：
p:before {
content: "Foo " + Bar;
font-family: sans- + "serif";
margin: 3px + 4px auto;
}
編譯爲
p:before {
content: "Foo Bar";
font-family: sans-serif;
margin: 7px auto;
}
五、 @-Rules 與指令
5.1 @import
Sass 拓展了 @import 的功能，允許其導入 SCSS 或 Sass 文件。被導入的文件將合併編譯到同一個 CSS 文件中，另外，被導入的文件中所包含的變量或者混合指令 (mixin) 都可以在導入的文件中使用。
Sass 在當前地址，或 Rack, Rails, Merb 的 Sass 文件地址尋找 Sass 文件，如果需要設定其他地址，可以用 :load_paths 選項，或者在命令行中輸入 --load-path 命令。
通常，@import 尋找 Sass 文件並將其導入，但在以下情況下，@import 僅作爲普通的 CSS 語句，不會導入任何 Sass 文件。
- 文件拓展名是
.css； - 文件名以
http://開頭； - 文件名是
url()； @import包含 media queries。
如果不在上述情況內，文件的拓展名是 .scss 或 .sass，則導入成功。沒有指定拓展名，Sass 將會試着尋找文件名相同，拓展名爲 .scss 或 .sass 的文件並將其導入。
// Sass 允許同時導入多個文件，例如同時導入 rounded-corners 與 text-shadow 兩個文件
@import "rounded-corners", "text-shadow"
// 導入文件也可以使用 #{ } 插值語句，但不是通過變量動態導入 Sass 文件，只能作用於 CSS 的 url() 導入方式
$family: "Droid+Sans";
@import url("http://fonts.googleapis.com/css?family=\#{$family}");
編譯爲
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");
5.1.1 分音（Partials）
如果需要導入 SCSS 或者 Sass 文件，但又不希望將其編譯爲 CSS，只需要在文件名前添加下劃線，這樣會告訴 Sass 不要編譯這些文件，但導入語句中卻不需要添加下劃線。
例如，將文件命名爲 _colors.scss，便不會編譯 _colors.css 文件。（導入方式不改變，只是修改文件命名方式）
5.1.2 嵌套
大多數情況下，一般在文件的最外層（不在嵌套規則內）使用 @import，其實，也可以將 @import 嵌套進 CSS 樣式或者 @media 中，與平時的用法效果相同，只是這樣導入的樣式只能出現在嵌套的層中。
假設 example.scss 文件包含以下樣式：
.example {
color: red;
}
然後導入到 #main 樣式內
#main {
@import "example";
}
編譯爲
#main .example {
color: red;
}
ps: 不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。