在程序員眼裏，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/

CSS 預處理器