以下是正文。
CSS 預處理器
為什么要有 CSS 預處理器
CSS基本上是設計師的工具，不是程序員的工具。在程序員的眼里，CSS是很頭痛的事情，它並不像其它程序語言，比如說PHP、Javascript等等，有自己的變量、常量、條件語句以及一些編程語法，只是一行行單純的屬性描述，寫起來相當的費事，而且代碼難以組織和維護。
很自然的，有人就開始在想，能不能給CSS像其他程序語言一樣，加入一些編程元素，讓CSS能像其他程序語言一樣可以做一些預定的處理。這樣一來，就有了“CSS預處器（CSS Preprocessor）”。
什么是 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 的語法
注釋
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）
參考鏈接：
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）。
掃一掃，你將發現另一個全新的世界，而這將是一場美麗的意外：
