1.預備知識--什么是 CSS 預處理器
CSS 預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為 CSS 增加了一些編程的特性，將 CSS 作為目標生成文件，然后開發者就只要使用這種語言進行編碼工作。
通俗的說，“CSS 預處理器用一種專門的編程語言，進行 Web 頁面樣式設計，然后再編譯成正常的 CSS 文件，以供項目使用。CSS 預處理器為 CSS 增加一些編程的特性，無需考慮瀏覽器的兼容性問題”，例如你可以在 CSS 中使用變量、簡單的邏輯程序、函數（如右側代碼編輯器中就使用了變量$color）等等在編程語言中的一些基本特性，可以讓你的 CSS 更加簡潔、適應性更強、可讀性更佳，更易於代碼的維護等諸多好處。
到目前為止，在眾多優秀的 CSS 預處理器語言中就屬 Sass、LESS和 Stylus 最優秀。
2.什么是 Sass？
Sass 是一門高於 CSS 的元語言，它能用來清晰地、結構化地描述文件樣式，有着比普通 CSS 更加強大的功能。 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，兩者之間不同之處有以下兩點：
文件擴展名不同，Sass 是以“.sass”后綴為擴展名，而 SCSS 是以“.scss”后綴為擴展名
語法書寫方式不同，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;
}
SCSS 和 CSS 寫法無差別：
SCSS 和 CSS 寫法無差別，這也是 Sass 后來越來越受大眾喜歡原因之一。簡單點說，把你現有的“.css”文件直接修改成“.scss”即可使用。