一、前言
說到前端建構怎能缺少css預處理器呢！其實css的預處理器有很多啦，比較出名的有scss、sass、stylus和less。（最近還聽說出現了autoprefixer等css後處理器，可參考@一絲的ppt）
衆多css預處理器中less的文法最接近原生css，是以相對來說更容易上手，假如有js、c#等程式設計經驗的話，其實上述的幾種預處理器的學習成本也不會特别高。下面是我們這陣子的學習筆記，以便日後查閱。
最好的入門教程——官網位址：http://lesscss.org/
最佳實踐之一——bootstrap
由于内容較多，特設目錄一坨：
二、搭建學習環境
三、内聯樣式和外聯樣式
四、文法
1. 注釋
2. 變量（variable）
清單類型
3. 嵌套（nested）
4. 父選擇器引用（parentselector）
5. 導入指令（import）
6. 繼承（extend）
6.1. 父選擇器必須嚴格比對，除了屬性選擇器中屬性值引号不必比對外，或添加all關鍵字外。
6.2. 父選擇器不支援變量形式
6.3. media query影響繼承的作用域
6.3.1. media query内的extend操作，僅能繼承目前塊的其他選擇器樣式。
6.3.2. 非media query内的extend操作，将會繼承所有media query中比對的選擇器樣式。
6.4. 增強的mixin定義mixin時僅能使用類選擇器和id選擇器，而extend操作可對應所有的選擇器，是以當沒有動态入參而又需要類選擇器和id選擇器以外的選擇器時，可使用extend來實作mixin的功能。
7. 混合（mixin）
7.1. 類選擇器、id選擇器自動被定義為mixin，而且具有命名空間；
7.2. 顯示定義不帶參數和帶參數的樣式庫(mixin庫)，不會輸出到最終輸出中，僅供調用；
7.3. mixin的中内置兩個特殊的對象@arguments和@reset。@argumentsk代表mixin的所有入參,而@reset代表mixin的...入參數組。
7.4. mixin的重載可定義多個同名mixin，調用時隻要參數數量比對則會執行相應的mixin。
8. 選擇、循環作業控制
五、運算符
六、函數
1. default函數
2. escape函數
3. 顔色處理函數
七、通過lessc将less引入開發環境
八、實戰一下
九、與grunt結合
十、總結
二、搭建學習環境
搭建less的學習環境非常簡單，隻需在</body>标簽前通過<script
type="text/javascript"
src="less.js"></script>引入處理器即可實作浏覽器端中将less預編譯為css樣式。更有效的方式是通過如下
代碼監測less樣式，自動編譯為css樣式，進而減少我們修改less代碼後需按f5後才看到實際效果的繁瑣步驟。
三、内聯樣式和外聯樣式
基于我們現在使用的是浏覽器端進行預編譯，是以less可用于内聯樣式和外聯樣式當中。
内聯樣式如下：
外聯樣式引入如下：
四、文法
2. 變量(variable)
less中的變量有以下規則：
以@作為變量的起始辨別，變量名由字母、數字、_和-組成
沒有先定義後使用的規定；
以最後定義的值為最終值；
可用于rule值、rule屬性、rule屬性部件、選擇器、選擇器部件、字元串拼接；
定義時 "@變量名: 變量值;" 的形式；引用時采用 "@變量名" 或 "@{變量名}" 的形式；
存在作用域，局部作用域優先級高于全局作用域。
less源碼：
最終輸出：
less變量除了支援#fff，12px，12，test等單值類型外，還支援清單類型，通過内置函數extract通過索引擷取清單元素，通過内置函數length擷取清單的元素個數
最終輸出：
3. 嵌套(nested)
less源碼：
最終輸出：
4. 父選擇器引用(parentselector)
采用&引用完整的父選擇器
可通過追加和預追加的方式加工&，進而生成新的選擇器
通過<code>&::after</code>等方式添加僞元素、僞類樣式規則集合
同一個選擇器可使用多個&
通過在選擇器後添加 "空格&"的方式，可将目前選擇器排列到最前面
&指向組選擇器時，會生成新的組選擇器
最終輸出：
5. 導入指令(import)
less樣式檔案可通過 @import '檔案路徑'; 引入外部的less檔案。
注意：
不帶擴充名或帶非.less的擴充名均被視為less檔案;
<code>@import</code>可出現在任何位置，而不像css的<code>@import</code>那樣隻能放在檔案第一行。
另外<code>@import</code>還提供了6個可選配置項(分别為<code>reference</code>,<code>inline</code>,<code>less</code>,<code>css</code>,<code>once</code>,<code>multiple</code>)，用來改變引入檔案的特性。文法為： @import (reference) '檔案路徑'; 。下面為各配置項的具體說明：
<dl></dl>
<dt>1. @import (reference) "檔案路徑"; </dt>
<dd> 将引入的檔案作為樣式庫使用，是以檔案中樣式不會被直接編譯為css樣式規則。目前樣式檔案通過<code>extend</code>和<code>mixins</code>的方式引用樣式庫的内容。</dd>
<dt>2. @import (inline) "檔案路徑"; </dt>
<dd> 用于引入與less不相容的css檔案，通過inline配置告知編譯器不對引入的檔案進行編譯處理，直接輸出到最終輸出。注意：引入的檔案和目前檔案會被編譯為一個樣式樣式</dd>
<dt>3. @import (less) "檔案路徑"; </dt>
<dd> 預設使用該配置項，表示引入的檔案為less檔案。</dd>
<dt>4. @import (css) "檔案路徑"; </dt>
<dd> 表示目前操作為css中的<code>@import</code>操作。目前檔案會輸出一個樣式檔案，而被引入的檔案自身為一個獨立的樣式檔案</dd>
<dt>5. @import (once) "檔案路徑"; </dt>
<dd> 預設使用該配置項，表示對同一個資源僅引入一次。</dd>
<dt>6. @import (multiple) "檔案路徑"; </dt>
<dd> 表示對同一資源可引入多次。</dd>
有兩種文法形式， <selector>:extend(<parentselector>){} 和 <selector>{ &:extend(<parentselector>); }
注意事項：
<dt></dt>
<dt> less源碼：</dt>
最終輸出：
6.2. 父選擇器不支援變量形式
less源碼：
6.3. media query影響繼承的作用域
注意：不能extend目前media query塊内部的子media query塊中的選擇器樣式；但可以extend父media query塊的選擇器樣式。
less源碼：
最終輸出：
less源碼：
mixin相當于macro，會将樣式規則内聯到調用的位置中。而less中的mixin有以下的注意點：
<dt> less源碼：</dt>
8. 選擇、循環作業控制
less中通過混合（mixin）後的when關鍵字來提供選擇的作業控制，通過遞歸來實作循環的作業控制。
less還支援+、-、*、/運算符。但對機關不一緻的運算數進行運算要注意以下兩點：
1. 運算數與運算符間必須用空格分隔；
2. 以第一個運算數的機關作為運算結果的機關；
less源碼：
六、函數
less為我們提供了一個功能強大的内置函數庫，其中絕大部分為顔色處理函數。下面着重介紹misc function中的default函數、string function中的escape函數和顔色處理函數。
示例：
雖然上述示例邏輯上不合理。但可以看出default函數用于條件控制當中，充當else或switch語句中default的角色。
通過官網提供的綜合示例我們可以更好了解它的用法：
注意：
1. default函數必須在條件控制語句當中使用；
2. default函數可實作比else更複雜的功能，如下：
2. escape函數
顧名思義就是對字元串中的特定字元進行編碼，該函數将對<code>\<space\></code>, <code>#</code>, <code>^</code>, <code>(</code>, <code>)</code>, <code>{</code>, <code>}</code>, <code>|</code>, <code>:</code>, <code>></code>, <code><</code>, <code>;</code>, <code>]</code>, <code>[ 和 </code><code>=字元進行編碼。</code>
顔色處理函數又分為四大類：顔色定義函數(color definition)、顔色通道值擷取函數(color channel)、顔色通道值修改函數(color operation function)、混色函數(color blending)。
這裡僅僅介紹常用的lighten和darken函數。
lighten(color, amount) ，color為顔色，amount為增加的亮度值，取值範圍為0-100%。
darken(color, amount) ，color為顔色，amount為減少的亮度值，取值範圍為0-100%。
到這裡我想大家已經對less有一定程度的了解，并希望在将其加入你的開發工具包中。但通過less.js将less解析器引入到浏覽器肯定是不适合開發的，而cli工具lessc更适合開發環境中使用。在使用之前我們先要通過npm來安裝less。
然後我們就可以通過 lessc [option option=parameter ...] <source> [destination] 的指令格式來調用lessc了！
lessc的option選項較多，我将主要的選項分為lessc指令資訊相關、sourcemap相關、@import指令相關和插件相關四類。
1. lessc指令資訊相關
lessc -h ，擷取lessc指令的幫助資訊；
lessc -v ，擷取lessc指令的版本号。
2. sourcemap相關
由于在浏覽器直接檢視和操作的是css樣式規則，而我們開發時使用的less代碼，這會導緻難以找到css樣式規則所對應的less代碼進而增大調試難
度。而sourcemap就是為了解決這一痛點而提出的技術解決方案，其原理就是通過一個map檔案來儲存兩個檔案中代碼的對應關系，然後支援
sourcemap的浏覽器的devtools中就會根據這些對應關系來定位相應的less代碼。（chrome和ff均支援
sourcemap，ie11及以下均不支援）
若對sourcemap不太了解的可以參考《前端建構：source maps詳解》
--source-map ，生成與生成的css同名的sourcemap檔案（例如生成的css檔案為main.css，那麼sourcemap檔案就是main.css.map），且與css檔案位于同一目錄下；
--source-map=<sourcemap檔案路徑> ，自定義sourcemap檔案的路徑；
--source-map-rootpath=<sourcemap檔案中sources屬性值的路徑字首> ，
假如main.less檔案位于src/less下，而生成的css和sourcemap檔案位于bin/style下，那麼就需要修改
sourcemap檔案中用于指向less檔案路徑的sources屬性值，浏覽器才能通過sourcemap檔案查找到less檔案。上述例子的指令
為：
lessc --source-map --source-map-rootpath=../../src/less/main.less src/less/main.less bin/style/main.css
--source-map-map-inline ，以data uri scheme的形式将sourcemap檔案内容内嵌到css檔案中。
--source-map-url=<css檔案中指向sourcemap檔案的url> ，預設情況下css檔案的最後一行會插入如 /*# sourcemappingurl=main.css.map */ 的内容來指向sourcemap檔案，而該選項則可修改sourcemappingurl的值。
3. @import指令相關
--include-path=<path>[;<path>]* ，通過@import指令引入外部less或css等檔案時存在引入的檔案路徑到底是以哪個目錄作為參考的問題，我們可以通過該選項來指定參考目錄，當存在多個參考目錄時，使用;号分隔。
--relative-urls 或 -ru ，用于保持樣式庫中的圖檔等資源的相對路徑。示例：
不使用該選項時：
使用該選項時：
4. 插件相關
lessc以插件的形式來增強其功能，下面僅介紹clean-css插件，其他插件請參考http://lesscss.org/usage/#plugins-list-of-less-plugins
首先通過npm安裝插件 npm install -g less-plugin-clean-css ，然後通過--clean-css選項來啟動css壓縮功能。
如： lessc file.less --clean-css="--s1 --advanced --compatibility=ie8"
先假定我們開發環境的目錄結構如下（灰色表示檔案由建構工具生成）：
sample
|-- build.bat 建構工具
|-- lib 第三方依賴庫
| |-- less
| |-- base.less
| |-- img
| |-- nav.png
|-- src 源碼
| |-- less
| | |-- main.less
| |-- index.html
|-- bin 編譯後的檔案
| |-- style
| |-- main.css
| |-- main.css.map
|-- dist 釋出檔案
|-- lib
| |-- less
| |-- img
| |-- nav.png
|-- app
|-- style
| |--main.css
|-- index.html
index.html檔案内容：
樣式庫base.less檔案内容：
main.less檔案内容：
我們一般将工程代碼級别的産出分為源碼、可執行代碼 和可釋出代碼 三種，而可執行代碼和可釋出代碼的建構需求是不同的，是以建構方式也有所差別，也就是lessc使用的選項也會不同。下面将針對不同的産出物來介紹lessc的使用。
1. 可執行代碼
我将可執行代碼部分再細分為release和debug兩種編譯模式，可以看到通過變量@env來實作不同模式下采用不同的樣式規則。預設采用release模式編譯源碼。
在執行lessc指令時通過選項--modify-var="env=debug"即可以debug模式編譯源碼。
可以看到上述編譯過程中均會生成sourcemap檔案以便調試使用。
2. 可釋出代碼
對于釋出的内容我們會對其進行壓縮處理
由于sourcemap檔案僅在開發階段有用，是以生成釋出代碼時就不要生成了。
完整的建構檔案build.bat如下：
然後在cmd中輸入 build bin 、 build debug 或 build dist 即可建構工程了！
我們沿用第八節的工程目錄結構來示範。
sample-grunt
|-- package.json
|-- gruntfile.js
|-- node_modules
|-- bin 編譯後的檔案
其中用于将less編譯為css的插件為grunt-contrib-less， 下面我們對應第八章的内容來介紹該插件的選項。
sourcemap相關：
{boolean} sourcemap，對應lessc中屬性值為true/false的--source-map選項；
{string} sourcemapfilename，對應lessc中屬性值為string的--source-map選項；
{string} sourcemaprootpath，對應lessc的--source-map-rootpath選項；
{string} sourcemapurl，對應lessc的--source-map-url選項；
{boolean} outputsourcefiles，，對應lessc的--source-map-map-inline選項；
@import指令相關：
{array|string} paths，對應lessc的--include-path選項；
{boolean} relativeurls，對應lessc的--relative-urls選項；
插件相關：
{array} plugins，數組元素為插件執行個體。
gruntfile.js内容如下：
到這裡我隻能和大家說一聲，“辛苦了各位，終于看完了耶！”。但正如标題所說，此刻無論是對less的使用，還是将其融入我們的開發工作流，我們均是入了個門而已。那應該如何進階呢？那就是
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)