LESS詳解之編譯LESS

　　掌握LESS，必須先掌握LESS的編譯。因為LESS是CSS預先處理語言的一種，是一種動態語言。LESS可以運行在各種語言和環境中，包括瀏覽器端、伺服器端等。就因為是一種CSS預先處理語言，所以需要編譯。下面為大家介紹一下編譯的方法。

　　瀏覽器端編譯

　　LESS可以在瀏覽器端不用編譯直接使用。在瀏覽器端使用LESS的時候，需要引入一個JS檔案，這個JS檔案能夠把LESS檔案在瀏覽器端編譯成CSS檔案，然後在呈現到頁面上。

　　使用方法

　　1、下載less-1.4.2.min.js檔案;

　　下載地址：http://www.leemagnum.com/js/less-1.4.2.min.js

　　2、頁面引入尾碼名為“.less”的檔案

<link rel="stylesheet/less" type="text/css" href="styles.less" />

　　3、頁面引入下載過的less-1.4.2.min.js的檔案

<script src="less.js" type="text/javascript"></script>

　　特別注意

　　A、LESS檔案要在LESS指令碼之前引用

　　B、必須在http(s)協議下使用

　　C、.less檔案不可以跨域使用(可以通過在服務端設定CORS來解決)

　　進階設定

　　引入less.js之前通過建立一個全域less對象的方式來指定參數

<script type="text/javascript">    less = {        env: "development", // 或者"production"        async: false,       // 非同步載入匯入的檔案        fileAsync: false,   // 使用檔案協議訪問頁面時非同步載入匯入的檔案        poll: 1000,         // 在監視模式下，每兩次請求之間的時間間隔（ms）        functions: {},      // user functions, keyed by name        dumpLineNumbers: "comments", // 或者"mediaQuery"，或者"all"        relativeUrls: false,// 是否調整相對路徑                            // 如果為false，則url已經是相對入口less檔案的                            // entry less file        rootpath: ":/a.com/"// 添加到每個url開始處的路徑    };</script><script src="less.js" type="text/javascript"></script>

　　監視模式

　　監視模式是一種在用戶端(瀏覽器)使用時的特性，它會在樣式檔案有更新時自動重新整理頁面。

　　在URL中加入#!watch並重新整理頁面即可開啟監視模式。你也可以通過在console中運行less.watch()來開啟監視模式。

　　修改變數

　　使用modifyVars可以在運行時修改LESS變數。當用新的變數值調用了這個函數時，LESS檔案將會被重新編譯，但不會被重新載入。一個基本的用法樣本：

less.modifyVars({    '@buttonFace': 'red',    '@buttonText': '#fff'});

　　調試LESS

　　我們在產生的CSS中帶上一些額外的資訊，以便一些調試工具可以定位到LESS檔案中的行數。可以通過dumpLineNumbers選項或者在url中添加!dumpLineNumbers:mediaQuery來開啟這個功能。你可以選擇“注釋”方式，使用FireLESS來調，或者選擇“mediaQuery”方式，使用FireBug/Chrome開發人員工具(被識別為SCSS media query調試格式)來調試。

　　使用koala本地編譯

　　Koala 是一款由國人開發的開源預先處理語言圖形編譯工具，目前已支援 Less、Sass、Compass 與 CoffeeScript。目前支援以下系統：Windows，Mac, 10.7+，Linux: 32bit / 64bit，Ubuntu: 32bit / 64bit;下載可以去百度搜尋“koala下載”進行下載。下面就針對編譯LESS進行介紹。

　　使用方法

　　1、安裝完成後開啟 Koala，把檔案夾拖入介面或者是在左側加號處選擇檔案夾，此時在介面左邊有檔案夾路徑產生。

　　2、同時有 less 檔案將顯示在介面中間，右鍵檔案選擇輸出 CSS 檔案的路徑。

　　3、左鍵點擊 less 檔案在右邊則有功能選項欄彈出，下面將介紹功能。

　　自動編譯(Just-In-Time 編譯)

　　當開啟自動編譯時間，使用編輯器按下 Ctrl+S 儲存時，CSS 文檔會自動更新。如果沒有開啟這個功能，那麼需要使用者在自行點擊"執行編譯"才更新 CSS 文檔。

　　編譯選項

　　行注釋(line comments)：這個功能會在 css 檔案裡對應的 less 編譯出來的 css 代碼上方提供一個注釋。注釋的內容分別說明來自 less 的第幾行開始，同時標明是來自那個 less 檔案。小例子如下

　　LESS代碼

@color: #4D926F;.meng {    color: @color;}

　　編譯後CSS代碼

/* line 3, a.less */.meng {  color: #4d926f;}

　　調試資訊(debug info)：這個調試功能是在儲存時自動檢測有無錯誤，注意Just-In-Time 編譯關閉時不會開啟，需要在你執行時才彈出錯誤。所以，建議開啟Just-In-Time 編譯。目前調試功能僅能檢測出一些影響編譯的錯誤：例如沒有帶{}、沒帶分號。這些錯誤，而有沒有使用選取器或者樣式輸入錯誤則不會提示。小例子如下

　　LESS代碼

@color: #4D926F;.meng {    color: @color;}

　　編譯後CSS代碼

@media -sass-debug-info{filename{font-family:file\:\/\/E\:\/李夢龍-文檔\/LESS\/LESS詳解之koala編譯LESS\/less\/b\.less}line{font-family:\000033}}.meng {  color: #4d926f;}

　　嚴格的數學(strict Math)和嚴格的單位(strict Units)是Koala 2。0新加的兩個，目前還沒有研究有啥區別編譯出來都是沒有注釋的。小例子如下

　　LESS代碼

@width : 2.233323232em;.meng {   width:@width;}

　　編譯後CSS代碼

.meng {  width: 2.233323232em;}

　　輸出方式(代碼壓縮)

　　正常(normal)：顧名思義，就是不壓縮。

　　LESS代碼

@width : 2.233323232em;.meng {   width:@width;   .leng {width:@width;   }}

　　編譯後CSS代碼

.meng {  width: 2.233323232em;}.meng .leng {  width: 2.233323232em;}

　　壓縮(compress)：顧名思義，就是壓縮。

　　LESS代碼

@width : 2.233323232em;.meng {   width:@width;   .leng {width:@width;   }}

　　編譯後CSS代碼

.meng{width:2.233323232em}.meng .leng{width:2.233323232em}

　　YUI壓縮(YUIcompress)：使用 YUI 的壓縮打包工具進行壓縮。

　　LESS代碼

@width : 2.233323232em;.meng {   width:@width;   .leng {width:@width;   }}

　　編譯後CSS代碼

.meng{width:2.233323232em}.meng .leng{width:2.233323232em}

　　LESS詳解之編譯LESS就為大家介紹到這裡了。瞭解了LESS是怎麼編譯的，才能更好的瞭解LESS的文法知識。有了LESS編譯法寶，為我們瞭解LESS做好了堅實的準備。