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

聲明

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

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

感謝大佬們的分享。

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

CSS預(yù)處理

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

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

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

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

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

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

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

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

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

下面，主要就來(lái)介紹下其中的兩種語(yǔ)言：Less 和 Sass。

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

Less

使用

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

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

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

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

而且，用