Sass是CSS的一種前處理器語言，類似的語言還有Less，Stylus等。

那麼什麼是CSS前處理器？

CSS 前處理器定義了一種新的語言，其基本思想是，用一種專門的程式語言，為 CSS 增加了一些程式設計的特性，將 CSS 作為目標生成檔案，然後開發者就只要使用這種語言進行編碼工作。

換言之就是說，CSS前處理器是一種專門的變成語言，在通過這種語言編寫之後，再將其編譯成正常的CSS檔案。

CSS前處理器給CSS增加了程式設計的特性，例如可以使用變數、函式、以及邏輯。

CSS前處理器的優勢：

可以讓你的CSS變得更加簡潔，適應性，可讀性都變得更好，同時代碼的維護也變得更方便。

關於Sass：

引用一段Sass官網上的描述：

Sass是一門高於CSS的元語言，它能用來清晰地、結構化地描述檔案樣式，有著比普通CSS更加強大的功能。
Sass能夠提供更簡潔、更優雅的語法，同時提供多種功能來建立可維護和管理的樣式表。

Sass是最早的CSS預處理語言，誕生於2007年，採用Ruby語言編寫。比LESS的功能更加強大，不過早期的縮排式語法(Sass的老版本語法，拋棄CSS的封號，大括號等符號)無法被大眾接受（無法想象沒有大括號的CSS的世界）。

雖然像html一樣的縮排式風格可以縮減程式碼量，強制規範的變成風格，但是大部分的前端工程師都難以接受沒有花括號的世界，倒是Sass早起沒有LESS普及。

Sass和SCSS:

其實Sass和SCSS是同一種東西，平時都被我們稱之為SCSS，不過還是一些區別：

1.檔案拓展名不同，拓展名分別是".sass"和".scss"。

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;
}