Sass 和 SCSS 有什麼區別？

標籤：link   ruby   nbsp   block   擴充   color   之間   老版本   區別   

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，兩者之間不同之處有以下兩點：

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

Sass 和 SCSS 有什麼區別？