什麼是CSS預處理器？
CSS 預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，爲 CSS 增加了一些編程的特性，將 CSS 作爲目標生成文件，然後開發者就只要使用這種語言進行編碼工作。
通俗的說，“CSS 預處理器用一種專門的編程語言，進行 Web 頁面樣式設計，然後再編譯成正常的 CSS 文件，以供項目使用。CSS 預處理器爲 CSS 增加一些編程的特性，無需考慮瀏覽器的兼容性問題”，例如你可以在 CSS 中使用變量、簡單的邏輯程序、函數（如右側代碼編輯器中就使用了變量$color）等等在編程語言中的一些基本特性，可以讓你的 CSS 更加簡潔、適應性更強、可讀性更佳，更易於代碼的維護等諸多好處。
其它 CSS 預處理器語言：
Sass（SCSS）
LESS
Stylus
Turbine
Swithch CSS
CSS Cacheer
DT CSS
這次分享將着重爲大家介紹 CSS 預處理器中的 Sass。
什麼是Sass
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 普及的原因。
Sass 和 SCSS 有什麼區別
Sass 和 SCSS 其實是同一種東西，我們平時都稱之爲 Sass，兩者之間不同之處有以下兩點：
- 文件擴展名不同，Sass 是以“.sass”後綴爲擴展名，而 SCSS 是以“.scss”後綴爲擴展名
- 語法書寫方式不同，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號( {} )和分號( ; )，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似。
先來看一個示例：
Sass語法：
$font-stack: Helevetica, sans-serif //定義變量
$primary-color: #333 //定義變量
body
font: 100/5 $font-stack
color: $primary-color
SCSS語法
$font-stack: Helevetica, sans-serif
$primary-color: #333
body {
font: 100/5 $font-stack
color: $primary-color
}
編譯出來的CSS
body{
font: 100% Helvetica, sans-serif;
color: #333
}
Sass/SCSS 和純 CSS 寫法差很多嗎？
寫法差很多嗎？這是很多初學者會問的一個問題。那麼藉此機會簡單瞭解一下。
Sass 和 CSS 寫法有差別：
Sass 和 CSS 寫法的確存在一定的差異，由於 Sass 是基於 Ruby 寫出來，所以其延續了 Ruby 的書寫規範。在書寫 Sass 時不帶有大括號和分號，其主要是依靠嚴格的縮進方式來控制的
SCSS和CSS寫法無差別：
SCSS和CSS寫法無差別，這也是Sass後來越來越受大衆喜歡的原因之一。簡單點說，把你現有的“.css”文件直接修改成“.scss”即可使用。
注意：“.sass”只能使用Sass老語法規則（縮進規則），“.scss”使用的是Sass的新語法規則，也就是SCSS語法規則（類似CSS語法規則）
Sass語法
Sass聲明變量
在有些編程語言中，聲明變量都是使用關鍵詞“var”開頭，但是在Sass不使用這個關鍵詞，而是使用大家都喜歡的美元符號“$”開頭。
$width: 300px;
$爲變量聲明符，width爲變量名稱，300爲變量值。