什麼是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最優秀，討論的也多，對比的也多。本教程將著重向大家介紹CSS預處理器中的Sass。相信前端開發工程師會喜歡的。

index.scss

$color: red;
.test {
    color: $color;
}