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

聲明

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

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

感謝大佬們的分享。

正文-CSS預(yù)處理（less&Sass）

CSS預(yù)處理

什么是 CSS 預(yù)處理？為什么要有 CSS 預(yù)處理？

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

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

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

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

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

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

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

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

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

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

Less

使用

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

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

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

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

而且，用