什麼是sass?
1.Sass 官網上是這樣描述 Sass 的：
Sass 是一門高於 CSS 的元語言，它能用來清晰地、結構化地描述檔案樣式，有著比普通 CSS 更加強大的功能。
Sass 能夠提供更簡潔、更優雅的語法，同時提供多種功能來建立可維護和管理的樣式表。
複製程式碼- Sass 前世今生：
Sass 是最早的 CSS 預處理語言，有比 LESS 更為強大的功能，不過其一開始的縮排式語法（Sass 老版本語法，後面課程會詳細介紹 ）並不能被大眾接受，不過由於其強大的功能和 Ruby on Rails 的大力推動，還是有很多開發者選擇了 Sass。
Sass 是採用 Ruby 語言編寫的一款 CSS 預處理語言，它誕生於2007年，是最大的成熟的 CSS 預處理語言。最初它是為了配合 HAML（一種縮排式 HTML 預編譯器）而設計的，因此有著和 HTML 一樣的縮排式風格。
為什麼早期不如 LESS 普及？
雖然縮排式風格可以有效縮減程式碼量，強制規範編碼風格，但它一方面並不為大多數程式接受，另一方面無法相容已有的 CSS 程式碼。這也是 Sass 雖然出現得最早，但遠不如 LESS 普及的原因。
複製程式碼3.Sass 和 SCSS 有什麼區別？
Sass 和 SCSS 其實是同一種東西，我們平時都稱之為 Sass，兩者之間不同之處有以下兩點：
3.1 副檔名不同，Sass 是以“.sass”字尾為副檔名，而 SCSS 是以“.scss”字尾為副檔名
3.2 語法書寫方式不同，Sass 是以嚴格的縮排式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似。
先來看一個示例：
複製程式碼Sass 語法
$font-stack: Helvetica, sans-serif //定義變數
$primary-color: #333 //定義變數
body
font: 100% $font-stack
color: $primary-color
複製程式碼SCSS 語法
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
複製程式碼編譯出來的 CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
複製程式碼-
Sass 和 CSS 寫法有差別：
4.1 Sass 和 CSS 寫法的確存在一定的差異，由於 Sass 是基於 Ruby 寫出來，所以其延續了 Ruby 的書寫規範。在書寫 Sass 時不帶有大括號和分號，其主要是依靠嚴格的縮排方式來控制的。如：
Sass寫法：
body
color: #fff
background: #f36
複製程式碼而在 CSS 我們是這樣書寫：
body{
color:#fff;
background:#f36;
}
複製程式碼4.2 SCSS 和 CSS 寫法無差別：
SCSS 和 CSS 寫法無差別，這也是 Sass 後來越來越受大眾喜歡原因之一。 簡單點說，把你現有的“.css”檔案直接修改成“.scss”即可使用。
sass 安裝
mac下安裝
第一步：安裝Ruby
不確定是否安裝,可以使用下面命令檢視
ruby -v
複製程式碼window下可以採用RubyInstaller 來安裝 Ruby 環境，這是它的網址：（選擇版本根據它給的提示 操作就可以）
https://rubyinstaller.org/downloads/
複製程式碼第二步：安裝sass
sudo gem install sass
複製程式碼window下安裝
gem install sass
複製程式碼如果被網路強掉，就在sass官網把它下載到本地，拖到install後面，即下面如視：
sudo gem insatll /a/b/c/sass-3.4.13-gem(本地下載路徑)
複製程式碼確認是否安裝成功
sass -v
複製程式碼更新
sudo gem update sass
複製程式碼window下更新
gem install sass
複製程式碼解除安裝
sudo gem uninstall sass
複製程式碼window下解除安裝
gem uninstall sass
複製程式碼sass編譯
命令編譯是指使用你電腦中的命令終端，通過輸入 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 語法格式
這裡說的 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 是 Sass 的新語法格式，從外形上來判斷他和 CSS 長得幾乎是一模一樣，程式碼都包裹在一對大括號裡，並且末尾結束處都有一個分號。其檔名格式常常以“.scss”為副檔名。
同樣的這段 CSS 程式碼：
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
複製程式碼我們使用 SCSS 語法格式將按下面這樣來書寫：
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
複製程式碼這樣的語法格式對於從事前端工作的同學來說更易於接受，這也是 SCSS 為什麼更被前端人員青眯的原因。
不管是 Sass 的語法格式還是 SCSS 的語法格式，他們的功能都是一樣的，不同的是其書寫格式和副檔名不同，來看一個簡單的對比圖：
正因為如此，有不少同學使用Sass新的語法規則，而副檔名依舊使用的是“.sass”，這也就造成血案了， 編譯時說編譯不出來。在此特別提醒新同學：“.sass”只能使用 Sass 老語法規則（縮排規則），“.scss” 使用的是 Sass 的新語法規則，也就是 SCSS 語法規則（類似 CSS 語法格式）。
---------------------------------------以上文章內容參考自慕課網sass初級篇，如有錯誤，請指正
複製程式碼