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

聲明

本篇內容梳理自以下幾個來源：

• Github:smyhvae/web
• Bootstrap網站的 less 文檔
• Sass中文網

感謝大佬們的分享。

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

CSS預處理

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

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

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

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

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

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

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

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

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

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

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

Less

使用

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

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

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

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

而且，用