Less 編譯工具

雖然你可以選擇在瀏覽器端使用Less，直接在頁面中嵌入一個 Less.js 文件，你也可以選擇在服務器端使用Less，使用命令行將Less文件編譯成最終的CSS文件。

然而，這兩種方式都不夠靈活，人們更喜歡使用圖形界面工具進行編譯。常見的工具有 winLess、simpLess、Koala 等，最值得推薦的編譯工具，非 Koala 莫屬。

Koala是由國人開放的一款開源的前端預處理器語言圖形編譯工具，可以跨平臺運行，完美兼容windows、linux、mac，支持Less、Sass、Compass、CoffeeScript，幫助Web開發人員更高效地進行開發。

有了 Koala，就再也不用手動輸入命令進行編譯，因為 Koala 會監聽文件內容的改變，並自動將 .less 文件編譯成 .css 文件，省時省力。你還像以前一樣，在頁面中直接使用 .css 文件，工作方式沒有發生任何改變，也不會改變你的使用習慣。

選擇Koala的理由

Koala具有以下優點，這正是推薦它的根本原因：

• 多語言支持：支持Less、Sass、CoffeeScript 和 Compass Framework。
• 實時編譯：監聽文件，當文件改變時自動執行編譯，這一切都在後臺運行，無需人工操作。
• 編譯選項：既可統一設置文件的編譯選項，也可單獨設置某個文件的編譯選項。
• 強大的文件右鍵功能：在文件上右鍵，即可操作打開文件、打開文件目錄、打開輸出文件目錄、設置輸出文件目錄、編譯、刪除六大常用功能。
• 錯誤提示：如果編譯時遇到語法錯誤，Koala會自動彈出錯誤信息，方便開發者定位代碼錯誤位置。
• 跨平臺：windows、linux、mac都能完美運行。
• 免費且負責：Koala完全免費，而且作者很負責，有什麽問題作者都會及時給予答復，意見什麽的可以直接提交給作者，一般在下一個版本就能得到解決。

如何使用Koala

開發者可以在百度搜索“Koala下載”，根據系統平臺下載對應的版本。比如，我們下載是V2.0.4版本，它是綠色版本，可以直接使用。

Koala的界面簡單、清晰，也很漂亮。如圖 1?2 所示：

有了 Koala，一切將變得非常簡單：

第一步：把目錄拖進窗口，或點擊左上角加號圖標，選擇需要編譯的Less文件目錄。

第二步：在編輯器中編寫Less代碼。

第三步：編寫完成後，Ctrl+S保存文件，Koala會在後臺自動編譯出CSS文件。

Koala界面介紹

把文件夾拖入窗口後，Koala會自動創建相應的工程。Koala的界面被分為四個區域，分別是按鈕區、工程區、工程文件列表區、設置區。如圖 1?3所示：

按鈕區

第一個區域為按鈕區，包含三個按鈕。第一個按鈕用於添加工程，第二個按鈕用於打開編譯文件的錯誤提示信息，第三個按鈕用於Koala的全局設置，可以設置界面語言，Less、Sass等的默認選項和輸出方式及高級設置等。當然，這裏也包括Koala的當前版本號及作者信息等。

工程區

第二個區域為工程區，該區域會顯示所有的工程，一行是一個工程。可以直接把文件夾拖入到該區域，每拖入一個文件夾就會添加一個工程。

文件列表區

第三個區域為工程的文件列表區，顯示被選中工程中的文件列表，每行是一個文件。每個文件的前面，有一個矩形圖標用來標識文件的類型，圖標後面緊跟文件名及編譯輸出的CSS文件的路徑。

如果該文件需要自動編譯，圖標和文本會以深色正常顯示，否則會反灰顯示（如，CSS就被反灰顯示）。

可以直接把文件拖入到該區域，拖入的文件會被添加到被選中的工程中。添加文件後，需要點擊上面的 refresh按鈕來刷新文件列表。選中文件後，鍵盤點delete鍵，可以將該文件從工程中移除。也可以在某個文件上右擊鼠標，根據彈出的功能菜單執行相應的操作。如圖 1?4所示：

如果工程中的文件類型較多，也可以通過下面的all/Styles/Scripts/Tmpl/JS/CSS 來過濾需要編譯的文件。

編譯選項設置區

第四區域為文件的編譯選項設置區，該區域默認不會顯示出來，只有當鼠標單擊文件列表區的某個文件時，才會顯示出來。

這個區域可以針對某個文件設置自動編譯、編譯選項、輸出方式，還可以點擊“執行編譯”來手動編譯。

1、自動編譯

當開啟自動編譯時，在編輯器中按下 Ctrl+S 保存文件時，Koala會自動編譯，並自動更新相應的CSS 文件。如果沒有打開自動編譯功能，就需要手動點擊“執行編譯”，才會編譯並更新 CSS 文件。

2、編譯選項

1）source map（源文件映射）：開啟該功能後，在編譯Less的同時，會生成相應的source map 文件。這樣，就可以在Firefox或谷歌瀏覽器中，通過sourcemap來直接調試Less源文件。如，以下Less文件（下同）：

1. @color: #4D926F;
2. .nav {
3. color: @color;
4. }

編譯後CSS文件為：

1. .nav {
2. color: #4d926f;
3. }
4. /*# sourceMappingURL=styles.css.map */

可以看出，在生成的CSS文件的末尾，會指示生成的 source map 的URL信息。本例中，source map 的URL為Less文件相同目錄下的 styles.css.map文件。styles.css.map是一個獨立的文件，內容如下：

1. {"version":3,"file":"styles.css","sources":["styles.less"],"names":[],"mappings":"AACA;EACI,cAAA;;AAGJ;EACE,cAAA","sourceRoot":"..\\less"}

簡單說，.map文件就是一個關系映射文件，裏面存儲著編譯前和編譯後代碼的文件、行號、列號和變量名的映射關系，以便開發人員根據這些位置信息來調試Less源文件。

2）line comments（行註釋）：開啟該功能後，會在編譯出來的CSS文件中對應的CSS 代碼上方，提供一個註釋，用來說明CSS 代碼來自哪個Less文件，以及從哪一行開始。

編譯後CSS文件為：

1. /* line 3, styles.less */
2. .nav {
3. color: #4d926f;
4. }

3）debug info（調試信息）：開啟該功能後，編譯生成的 CSS文件中就會包含調試信息。這樣的話，通過Firefox或谷歌的調試工具，就可以定位到Less文件，而不是編譯後的CSS文件。

編譯後CSS代碼為：

1. @media -sass-debug-info{filename{font-family:file\:\/\/D\:\/less\/styles\.less}line{font-family:\ 32}}
2. .nav {
3. color: #4d926f;
4. }

如果編譯生成的CSS文件中沒有以 @media -sass-debug-info 開頭的代碼，說明沒有輸出調試信息。請使用Koala重新編譯Less文件，並確定已經勾選了debug info選項。

4）strict math（嚴格運算模式）：開啟“嚴格運算模式”後，數學運算必須放在括號中，否則可能會出現錯誤的結果。如以下Less代碼：

1. p {
2. line-height: 1+1;
3. }

在關閉“嚴格運算模式”時，編譯後CSS代碼為：

1. p {
2. line-height: 2;
3. }

在開啟“嚴格運算模式”時，編譯後CSS代碼為：

1. p {
2. line-height: 1+1;
3. }

顯然，這並不是我們想要的結果。因此，在開啟“嚴格運算模式”後，如果想要得到正確的結果，所有的數學運算都必須放在括號中。如：

1. p {
2. line-height: (1+1);
3. }

5）strict units（嚴格單位模式）：開啟“嚴格單位模式”後，在編譯時將強制驗證單位的合法性。如，4px/2px 結果為 2，而不是 2px，而 4em/2px 將報錯。如以下Less代碼：

1. .nav {
2. font-size: 100em/5px;
3. }

由於上述代碼沒有使用嚴格單位，因此在“嚴格單位模式”下，就會出現編譯錯誤。錯誤信息如下：

1. SyntaxError: Multiple units in dimension. Correct the units or use the unit function. Bad unit: em/px in D:\less\styles.less:2:4
2. 1 .nav {
3. 2 font-size: 100em/5px;
4. 3 }

6）autoprefix（自動前綴模式）：開啟“自動前綴模式”後，在編譯時會為某些非常新的CSS屬性添加瀏覽器私有前綴。如，以下Less代碼：

1. h2 {
2. transform: rotate(45deg);
3. }

在開啟“自動前綴模式”時，編譯後CSS代碼為：

1. h2 {
2. -webkit-transform: rotate(45deg);
3. -ms-transform: rotate(45deg);
4. transform: rotate(45deg);
5. }

Less 編譯工具