本文最初發表於博客園，並在GitHub上持續更新前端的系列文章。歡迎在GitHub上關註我，一起入門和進階前端。

以下是正文。

CSS 預處理器

為什麽要有 CSS 預處理器

CSS基本上是設計師的工具，不是程序員的工具。在程序員的眼裏，CSS是很頭痛的事情，它並不像其它程序語言，比如說PHP、Javascript等等，有自己的變量、常量、條件語句以及一些編程語法，只是一行行單純的屬性描述，寫起來相當的費事，而且代碼難以組織和維護。

很自然的，有人就開始在想，能不能給CSS像其他程序語言一樣，加入一些編程元素，讓CSS能像其他程序語言一樣可以做一些預定的處理。這樣一來，就有了“CSS預處器

什麽是 CSS 預處理器

• 是 CSS 語言的超集，比CSS更豐滿。

CSS 預處理器定義了一種新的語言，其基本思想是：用一種專門的編程語言，為CSS增加了一些編程的特性，將CSS作為目標生成文件，然後開發者就只要使用這種語言進行編碼工作。

通俗的說，CSS預處理器用一種專門的編程語言，進行Web頁面樣式設計，然後再編譯成正常的CSS文件，以供項目使用。CSS預處理器為CSS增加一些編程的特性，無需考慮瀏覽器的兼容性問題，例如你可以在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預處理器語言。相信前端開發工程師會做出自己的選擇——我要選擇哪款CSS預處理器。

less 的介紹

less 是一款比較流行的預處理 CSS，支持變量、混合、函數、嵌套、循環等特點。

• 官網

• 中文網（less 文檔）

• Bootstrap網站的 less 文檔

• 推薦文章：http://www.w3cplus.com/css/less

less 的語法

註釋

less 的註釋可以有兩種。

第一種註釋：模板註釋

  // 模板註釋 這裏的註釋轉換成CSS後將會刪除

因為 less 要轉換為 css才能在瀏覽器中使用。轉換成 css 之後，這種註釋會被刪除（畢竟 css 不識別這種註釋）。

第二種註釋：CSS 註釋語法

/* CSS 註釋語法 轉換為CSS後讓然保留 */

總結：如果在less中寫註釋，我們推薦寫第一種註釋。除非是類似於版權等內容，就采用第二種註釋。

定義變量

我們可以把重復使用或經常修改的值定義為變量，在需要使用的地方引用這個變量即可。這樣可以避免很多重復的工作量。

（1）在less文件中，定義一個變量的格式：

@變量名: 變量值;        //格式

@bgColor: #f5f5f5;      //格式舉例

（2）同時，在 less 文件中引用這個變量。

最終，less文件的完整版代碼如下：

main.less：

// 定義變量
@bgColor: #f5f5f5;

// 引用變量
body{
    background-color: @bgColor;
}

我們將上面的less文件編譯為 css 文件後（下一段講less文件的編譯），自動生成的代碼如下：

main.css：

body{
    background-color: #f5f5f5;
}

使用嵌套

在 css 中經常會用到子代選擇器，效果可能是這樣的：

.container {
  width: 1024px;
}

.container > .row {
  height: 100%;
}

.container > .row a {
  color: #f40;
}

.container > .row a:hover {
  color: #f50;
}

上面的代碼嵌套了很多層，寫起來很繁瑣。可如果用 less 的嵌套語法來寫這段代碼，就比較簡潔。

嵌套的舉例如下：

main.less:

.container {
  width: @containerWidth;

  > .row {
    height: 100%;
    a {
      color: #f40;

      &:hover {
        color: #f50;
      }

    }
  }

  div {
    width: 100px;

    .hello {
      background-color: #00f;
    }

  }
}

將上面的less文件編譯為 css 文件後，自動生成的代碼如下：

main.css

.container {
    width: 1024px;
}

.container > .row {
    height: 100%;
}

.container > .row a {
    color: #f40;
}

.container > .row a:hover {
    color: #f50;
}

.container div {
    width: 100px;
}

.container div .hello {
    background-color: #00f;
}

Mixin

Mixin 的作用是把重復的代碼放到一個類當中，每次只要引用類名，就可以引用到裏面的代碼了，非常方便。

（1）在 less 文件中定義一個類：（將重復的代碼放到自定義的類中）

/* 定義一個類 */
.roundedCorners(@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

上方代碼中，第一行裏面，括號裏的內容是參數：這個參數是缺省值。

（2）在 less 文件中引用上面這個類：

#header {
  .roundedCorners;
}
#footer {
  .roundedCorners(10px);
}

上方代碼中，header 中的引用沒有帶參數，表示參數為缺省值； footer 中的引用帶了參數，那就用這個參數。

Import

在開發階段，我們可以將不同的樣式放到多個文件中，最後通過@import 的方式合並。意思就是，當出現多個 less 文件時，怎麽引用它們。

這個很好理解， css 文件可以有很多個，less文件也可以有很多個。

（1）定義一個被引用的less文件，名為_button1.less：

_button1.less:

.btn{
  line-height: 100px;
  color: @btnColor;
}

PS1：被引用的less文件，我們習慣在前面加下劃線，表示它是部分文件。

PS2：_button1.less裏可以引用main.css裏的自定義變量。

（2）在 main.css 中引用上面的 _button1.less：（代碼的第二行）

main.css：

@btnColor: red;

@import url(`_button1.less:‘);    //這裏的路徑寫的是相對路徑

body{
  width: 1024px;
}

將 上面的main.less 編譯為 main.css之後，自動生成的代碼如下：

.btn {
    line-height: 100px;
    color: red;
}

body {
    width: 1024px;
}

內置函數

less 裏有一些內置的函數，這裏講一下 lighten 和 darken 這兩個內置函數。

main.less:

body {
  background-color: lighten(#000, 10%);   // 讓黑色變亮 10%
  color: darken(#fff, 10%);               // 讓白色變暗 10%
}

將 上面的 main.less 編譯為 main.css 之後，自動生成的代碼如下：

main.css：

body {
  background-color: #1a1a1a;
  color: #e6e6e6;
}

如果還有什麽不懂的，可以看 api 文檔，在上面的第二段附上了鏈接。

在 index.html中直接引用 less.js

• 做法一：寫完 less文件後，將其編譯為 css 文件，然後在代碼中引用css文件。

• 做法二：在代碼中直接用引用 less 文件。

產品上線後，當然是使用做法一，因為做法二會多出編譯的時間。

平時開發或演示demo的時候可以用做法二。

這一段，我們講一下做法二，其實是瀏覽器在本地在線地把 less 文件轉換為 css 文件。

（1）在 less 官網下載 less.js 文件：

把下載好的文件放在工程文件的lib文件夾裏：

（2）在 index.html 中引入 less.js 和我們自己寫的 main.less。位置如下：

copy 紅框那部分的代碼如下：

    <link rel="stylesheet/less" href="../main.less">

我們可以在打開的網頁中，通過控制臺看到效果：

註意，我們要在服務器中打開 html 文件，否則，看不到效果。

這裏也告訴了我們：

不提倡將 less 引入頁面，因為 less 需要編譯，因此你就需要再引入一個less.js, 多了一個HTTP 請求，同時當瀏覽器禁用了 js 你的樣式就不起作用了，less 編譯應該在服務端或使用 grunt 自動編譯。

工程文件：（工程文件中，我引用的less.js版本是 2.5.3）

• 2018-02-27-LessDemo.rar

參考鏈接：

• 知乎 | less文件如何引入頁面

less 的編譯

less 的編譯指的是將寫好的 less 文件 生成為 css 文件。

less 的編譯，依賴於 NodeJS 環境。因此，我們需要先安裝 NodeJS。

1、安裝 Node.js

去 Node.js的官網下載安裝包：

一路 next 進行安裝。

安裝完成後，配置環境變量：

在 path 變量中追加安裝路徑：;C:\Program Files\nodejs。重啟資源管理器，即可生效。

PS：我發現，我安裝的 node.js v8.9.4 版本，已經自動添加了環境變量。

在 cmd 命令行，輸入node.exe -v，可以查看 node.js 的版本。

2、安裝 less 的編譯環境

將 npm.zip 解壓，將解壓後的文件拷貝到路徑C:\Users\smyhvae\AppData\Roaming\npm下：

然後重啟資源管理器（或者重啟電腦）。在 cmd 中輸入 lessc，如果能看到下面的效果，說明 less編譯環境安裝成功：

如果你用的是 linux 系統，可以輸入下面的命令安裝：

    npm install -g less

3、將 less 文件編譯為 css 文件

在 less 所在的路徑下，輸入 lessc xxx.less，即可編譯成功。或者，如果輸入 lessc xxx.less > ..\xx.css，表示輸出到指定路徑。

我的公眾號

想學習代碼之外的軟技能？不妨關註我的微信公眾號：生命團隊（id：vitateam）。

掃一掃，你將發現另一個全新的世界，而這將是一場美麗的意外：

CSS預處理器之Less詳解