什麼是 Sass 其與SCSS區別是什麼？

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，二者之間不一樣之處有如下兩點：

1. 文件擴展名不一樣，Sass 是以「.sass」後綴爲擴展名，而 SCSS 是以「.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;
}