CSS 預處理器

在程序員眼裏，css不像其餘程序語言（例如PHP, Javascript等等），有本身的變量、常量、條件語句以及一些編程語法，它只是一行行單純的屬性描述，寫起來至關費事，並且代碼難以組織和維護。天然的有人開始想，能不能給css像其餘程序語言同樣，加入一些編程元素，讓css能像其餘程序語言同樣能夠作一些預約的處理，就這樣，有了"css預處理器（css preprocessor）」。

具體什麼是css預處理器呢？

css預處理器定義了一種新的語言，其基本思想是：用一種專門的編程語言，爲css增長一些編程特性，將css做爲目標生成文件，而後開發者只要使用這種語言進行編碼工做，而後再編譯成正常的css文件，以供項目使用。使用css預處理器無需考慮瀏覽器的兼容性問題，你能夠在css中使用變量、簡單的邏輯程序、函數等等在編程語言中的一些基本特性，可讓你的css更加簡潔、適應性更強，可讀性更佳，更易於代碼的維護等諸多好處。

css預處理器技術已經很是成熟，目前也出現了多種不一樣的css預處理語言，Sass (SCSS)、LESS、Stylus等等

Sass簡介

Sass號稱是世界上最成熟、最穩定、最強大的專業級CSS擴展語言。徹底兼容全部版本的CSS，擁有比其餘任何CSS擴展語言更多的功能和特性，行業內把Sass做爲首選css擴展語言。sass基於Ruby語言開發而成，所以安裝sass前須要安裝Ruby。（注:mac下自帶Ruby無需在安裝Ruby!）

Sass中文網：https://www.sass.hk/

Sass 有兩種語法格式。首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 —— 這種格式僅在 CSS3 語法的基礎上進行拓展，全部 CSS3 語法在 SCSS 中都是通用的，同時加入 Sass 的特點功能。此外，SCSS 也支持大多數 CSS hacks 寫法以及瀏覽器前綴寫法 (vendor-specific syntax)，以及早期的 IE 濾鏡寫法。這種格式以 .scss 做爲拓展名。

另外一種也是最先的 Sass 語法格式，被稱爲縮進格式 (Indented Sass) 一般簡稱 "Sass"，是一種簡化格式。它使用 「縮進」 代替 「花括號」 表示屬性屬於某個選擇器，用 「換行」 代替 「分號」 分隔屬性，不少人認爲這樣作比 SCSS 更容易閱讀，書寫也更快速。縮進格式也可使用 Sass 的所有功能，只是與 SCSS 相比個別地方採起了不一樣的表達方式，具體請查看 the indented syntax reference。這種格式以 .sass 做爲拓展名。

Less簡介

Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增長了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。

Less 是基於JavaScript寫的，能夠運行在 Node 或瀏覽器端。

Less中文網：http://lesscss.cn/

bootstrap文檔：http://www.bootcss.com/p/lesscss/#synopsis

Stylus簡介

用於node,js,，支持去掉'{}'，'：'，';'，'()'

中文文檔：http://www.zhangxinxu.com/jq/stylus/