摘要：聲明聲明本篇內(nèi)容梳理自以下幾個來源網(wǎng)站的文檔中文網(wǎng)感謝大佬們的分享。這個時候，預處理器就出現(xiàn)了，其實應該是說和這類語言出現(xiàn)了。

聲明

本篇內(nèi)容梳理自以下幾個來源：

• Github:smyhvae/web
• Bootstrap網(wǎng)站的 less 文檔
• Sass中文網(wǎng)

感謝大佬們的分享。

正文-CSS預處理（less&Sass）

CSS預處理

什么是 CSS 預處理？為什么要有 CSS 預處理？

這里就講講這兩個問題，寫過 CSS 應該就會比較清楚，雖然我才剛入門，但在寫一些練手時就已經(jīng)有點感覺了：寫 CSS 后，很難維護，維護基本要靠注釋來，而且由于 HTML 文檔中標簽的嵌套層次復雜，導致寫 CSS 的選擇器時也很費勁，尤其是在后期為某部分標簽新增樣式時，總會不知道到底應該在 CSS 文件中哪里寫這個選擇器，這個選擇器是否會與前面沖突。

最有感覺的一點是，CSS 代碼基本沒法復用，一個頁面一份 CSS，每次都需要重寫，只是很多時候，可以直接去舊的里面復制粘貼。

有這么些問題是因為 CSS 本身并不是一門編程語言，它只是一個標記語言，靜態(tài)語言，不具備編程語言的特性，所以寫容易，但維護會比較難。

這個時候，CSS 預處理器就出現(xiàn)了，其實應該是說 Sass 和 Less 這類語言出現(xiàn)了。

Sass 和 Less 這類語言，其實可以理解成 CSS 的超集，也就是它們是基于 CSS 原本的語法格式基礎上，增加了編程語言的特性，如變量的使用、邏輯語句的支持、函數(shù)等。讓 CSS 代碼更容易維護和復用。

但瀏覽器最終肯定是只認識 CSS 文件的，它并無法處理 CSS 中的那些變量、邏輯語句，所以需要有一個編譯的過程，將 Sass 或 Less 寫的代碼轉換成標準的 CSS 代碼，這個過程就稱為 CSS 預處理。

所以，CSS 預處理器其實只是一個過程的稱呼，主要工作就是將源代碼編譯并輸出標準的 CSS 文件，而這個源代碼可以用 Sass 寫，也可以用 Less，當然還有其他很多種語言。

那么，到底哪一種語言好，我還沒能力來討論，反正存在即有理，每種語言總它的優(yōu)缺點、總有它的適用場景。

下面，主要就來介紹下其中的兩種語言：Less 和 Sass。

我覺得，掌握 CSS 預處理的關鍵，其實也就兩點，一是掌握語言的語法、二是清楚怎么編譯成標準的 CSS 文件；語法基本都不會很難，編譯一般需要配置一些環(huán)境，因為我使用的開發(fā)工具是 WebStrom，所以會介紹下 WebStrom 上的配置。

Less

使用

Less 寫的 CSS 文件后綴名為 .less，但瀏覽器并不認識 less 文件，所以最后需要轉換成 css 文件，有兩種方式：

• 借助 less.js，程序運行期間，瀏覽器會自動借助 less.js 來解析 less 文件內(nèi)的代碼，轉成 css 標準語法

這種方式，不需要配置任何其他環(huán)境，只需要下載 less.js，并在項目中使用即可，但有幾點需要注意：

HTML 文檔通過 link 標簽引入 less 文件時，需要將 link 標簽的 rel 屬性設置為 stylesheet/less，否則無效；

而且，用