就CSS本身而言，對於大多數Web前端從業人員來說就不是問題。學過CSS的人都知道，它不是一種編程語言。你可以用它開發網頁樣式，但是沒法用它編程。換句話說，CSS基本上是設計師的工具，不是程序員的工具。在程序員的眼裡，CSS是很頭痛的事情，它並不像其它程序語言，比如說PHP、Javascript等等，有自己的變量、常量、條件語句以及一些編程語法，只是一行行單純的屬性描述，寫起來相當的費事，而且代碼難易組織和維護。
很自然的，有人就開始在想，能不能給CSS像其他程序語言一樣，加入一些編程元素，讓CSS能像其他程序語言一樣可以做一些預定的處理。這樣一來，就有了“CSS預處器（CSS Preprocessor）”。
CSS 預處理器
定義：
CSS 預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為 CSS 增加了一些編程的特性，將 CSS 作為目標生成文件，然後開發者就只要使用這種語言進行編碼工作。
通俗的說，“CSS 預處理器用一種專門的編程語言，進行 Web 頁面樣式設計，然後再編譯成正常的 CSS 文件，以供項目使用。CSS 預處理器為 CSS 增加一些編程的特性，無需考慮浏覽器的兼容性問題”，例如你可以在 CSS 中使用變量、簡單的邏輯程序、函數（如右側代碼編輯器中就使用了變量$color）等等在編程語言中的一些基本特性，可以讓你的 CSS 更加簡潔、適應性更強、可讀性更佳，更易於代碼的維護等諸多好處。
其它 CSS 預處理器語言：
CSS 預處理器技術已經非常的成熟，而且也湧現出了很多種不同的 CSS 預處理器語言，比如說：
- Sass（SCSS）
- LESS
- Stylus
- Turbine
- Swithch CSS
- CSS Cacheer
- DT CSS
如此之多的 CSS 預處理器，那麼“我應該選擇哪種 CSS 預處理器？”也相應成了最近網上的一大熱門話題，在 Linkedin、Twitter、CSS-Trick、知呼以及各大技術論壇上，很多人為此爭論不休。相比過去我們對是否應該使用 CSS 預處理器的話題而言，這已經是很大的進步了。
到目前為止，在眾多優秀的 CSS 預處理器語言中就屬 Sass、LESS 和 Stylus 最優秀，討論的也多，對比的也多。
- $color: red;
- .test {
- color: $color;
- }
執行結果：
- .test {
- color: red;
- }