Sass 語法格式
這里說的 Sass 語法是 Sass 的最初語法格式，他是通過 tab 鍵控制縮進的一種語法規則，而且這種縮進要求非常嚴格。另外其不帶有任何的分號和大括號。常常把這種格式稱為 Sass 老版本，其文件名以“.sass”為擴展名。來看一個 Sass 語法格式的簡單示例。假設我們有一段這樣的 CSS 代碼：
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
現在用 Sass 的語法格式來編寫：
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
在整個 Sass 代碼中，我們沒看到類似 CSS 中的大括號和分號。
注：這種語法格式對于前端人員都不太容易接受，而且容易出錯。
Scss 語法格式
我們使用 SCSS 語法格式將按下面這樣來書寫：
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
不管是 Sass 的語法格式還是 SCSS 的語法格式，他們的功能都是一樣的，不同的是其書寫格式和文件擴展名不同
正因為如此，有不少同學使用 Sass 新的語法規則(scss)，而文件擴展名依舊使用的是“.sass”，這也就造成血案了，編譯時說編譯不出來。在此特別提醒新同學：“.sass”只能使用 Sass 老語法規則（縮進規則），“.scss”使用的是 Sass 的新語法規則，也就是 SCSS 語法規則（類似 CSS 語法格式）。
Sass 編譯
常常有人會問，使用 Sass 進行開發，那么是不是直接通過“<link>”引用“.scss”或“.sass”文件呢？
那么這里告訴大家，在項目中還是引用“.css”文件，Sass 只不過是做為一個預處理工具，提前幫你做事情，只有你需要時候，他才有攻效。
這樣一來，也就有了這章需要介紹的內容—— Sass 的編譯。因為 Sass 開發之后，要讓 Web 頁面能調用 Sass 寫好的東西，就得有這么一個過程，這個過程就稱之為 Sass 編譯過程。Sass 的編譯有多種方法：
命令編譯
GUI工具編譯
自動化編譯
命令編譯
命令編譯是指使用你電腦中的命令終端，通過輸入 Sass 指令來編譯 Sass。這種編譯方式是最直接也是最簡單的一種方式。因為只需要在你的命令終端輸入：
單文件編譯：
sass <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css
這是對一個單文件進行編譯，如果想對整個項目所有 Sass 文件編譯成 CSS 文件，可以這樣操作：
多文件編譯：
sass sass/:css/
上面的命令表示將項目中“sass”文件夾中所有“.scss”(“.sass”)文件編譯成“.css”文件，并且將這些 CSS 文件都放在項目中“css”文件夾中。
缺點及解決方法：
在實際編譯過程中，你會發現上面的命令，只能一次性編譯。每次個性保存“.scss”文件之后，都得重新執行一次這樣的命令。如此操作太麻煩，其實還有一種方法，就是在編譯 Sass 時，開啟“watch”功能，這樣只要你的代碼進行任保修改，都能自動監測到代碼的變化，并且給你直接編譯出來：
sass --watch <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css
當然，使用 sass 命令編譯時，可以帶很多的參數：
參數
watch 舉例：
來看一個簡單的示例，假設我本地有一個項目，我要把項目中“bootstrap.scss”編譯出“bootstrap.css”文件，并且將編譯出來的文件放在“css”文件夾中，我就可以在我的命令終端中執行：
sass --watch sass/bootstrap.scss:css/bootstrap.css
一旦我的 bootstrap.scss 文件有任何修改，只要我重新保存了修改的文件，命令終端就能監測，并重新編譯出文件：
實時
常見的編譯錯誤
在編譯 Sass 代碼時常常會碰到一些錯誤，讓編譯失敗。這樣的錯誤有系統造成的也有人為造成的，但大部分都是人為過失引起編譯失敗。
而最為常見的一個錯誤就是字符編譯引起的。在Sass的編譯的過程中，是不是支持“GBK”編碼的。所以在創建 Sass 文件時，就需要將文件編碼設置為“utf-8”。
另外一個錯誤就是路徑中的中文字符引起的。建議在項目中文件命名或者文件目錄命名不要使用中文字符。而至于人為失誤造成的編譯失敗，在編譯過程中都會有具體的說明，大家可以根據編譯器提供的錯誤信息進行對應的修改。
不同樣式風格的輸出方法
眾所周知，每個人編寫的 CSS 樣式風格都不一樣，有的喜歡將所有樣式代碼都寫在同一行，而有的喜歡將樣式分行書寫。在 Sass 中編譯出來的樣式風格也可以按不同的樣式風格顯示。其主要包括以下幾種樣式風格：
- 嵌套輸出方式 nested
- 展開輸出方式 expanded
- **緊湊輸出方式 compact **
- 壓縮輸出方式 compressed
嵌套輸出方式 nested
1、嵌套輸出方式 nested
Sass 提供了一種嵌套顯示 CSS 文件的方式。例如
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
在編譯的時候帶上參數“ --style nested”:
sass --watch test.scss:test.css --style nested
編譯出來的 CSS 樣式風格：
nav ul {
margin: 0;
padding: 0;
list-style: none; }
nav li {
display: inline-block; }
nav a {
display: block;
padding: 6px 12px;
text-decoration: none; }
效果圖：
展開輸出方式 expanded
2、展開輸出方式 expanded
在編譯的時候帶上參數“ --style expanded”:
sass --watch test.scss:test.css --style expanded
這個輸出的 CSS 樣式風格和 nested 類似，只是大括號在另起一行，同樣上面的代碼，編譯出來：
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
效果圖：
緊湊輸出方式 compact
3、緊湊輸出方式 compact
在編譯的時候帶上參數“ --style compact”:
sass --watch test.scss:test.css --style compact
編譯出來的 CSS 樣式風格：
nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }
效果:
壓縮輸出方式 compressed
4、壓縮輸出方式 compressed
在編譯的時候帶上參數“ --style compressed”:
sass --watch test.scss:test.css --style compressed
壓縮輸出方式會去掉標準的 Sass 和 CSS 注釋及空格。也就是壓縮好的 CSS 代碼樣式風格：
nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}
效果圖:
Sass 的調試
演示圖：
Sass 調試一直以來都是一件頭痛的事情，使用 Sass 的同學都希望能在瀏覽器中直接調試 Sass 文件，能找到對應的行數。值得慶幸的是，現在實現并不是一件難事，只要你的瀏覽器支持“sourcemap”功能即可。早一點的版本，需要在編譯的時候添加“--sourcemap” 參數：
sass --watch --scss --sourcemap style.scss:style.css
在 Sass3.3 版本之上（我測試使用的版本是 3.4.7），不需要添加這個參數也可以：
sass --watch style.scss:style.css
在命令終端，你將看到一個信息：
>>> Change detected to: style.scss write style.css write style.css.map
這時你就可以像前面展示的 gif 圖一樣，調試你的 Sass 代碼。
