Sass學習之路(1)——Sass簡介

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

其實SCSS語法便是Sass後續推出的新版本語法，可以理解成一種語法糖，不再沿用ruby的語法習慣。（熟悉的大括號和封號又迴歸了）。