Less/Sass編譯工具，koala使用指南

若是你正在使用sass、less或coffee，而沒有注意到koala， 那說明你可能已經很久沒有更新你的知識庫了。koala這個由國人編寫的，用於編譯sass、less、coffee利器，在最近的短短几個月曝光率不亞 於任何其餘的技術。固然這跟其做者的辛勤勞動，讓其更強更優秀有很大關係。在此先感謝koala的做者們，感謝大家給咱們帶來這麼棒的免費工具。

其實編譯工具備不少，我本人就各類免費的編譯sass的工具都試過，通常都是不了了之，要麼功能有限，要麼編譯速度不敢恭維，直到一個偶然的機會遇 到koala，才中止搜索腳步，穩定使用它，如今它已是我開機必備工具之一。下面我將以我本身的實際經驗，簡單介紹下koala。

選擇koala的7大理由：

1. 多語言支持：支持Less、Sass、CoffeeScript 和 Compass Framework。
2. 實時編譯：監聽文件，當文件改變時自動執行編譯，這一切都在後臺運行，無需人工操做。
3. 編譯選項：既可統一設置文件的編譯選項，也可單獨設置某個文件的編譯選項。
4. 強大的文件右鍵功能：右鍵文件元素，便可操做打開文件，打開文件目錄，打開輸出文件目錄，設置輸出文件目錄，編譯，刪除六大經常使用功能。
5. 錯誤提示：在編譯時若是遇到語法的錯誤，koala將在右下角彈出錯誤信息，方便開發者定位代碼錯誤位置。
6. 跨平臺：windows、linux、mac都能完美運行。
7. 免費且負責：koala徹底免費，並且做者很負責，有什麼問題做者都會及時給予答覆，意見什麼的能夠直接提交給做者，通常在下一個版本就能獲得解決。

瞭解了它的優勢以後，咱們來熟悉下它的界面，這個其實也是我選擇它的一個緣由。

簡潔美觀的面板

上面四個數字分別對應四個區域：

第一區域：第一個按鈕用於添加項目，第二個按鈕打開編譯文件的錯誤提示，第三個按鈕設置koala，裏面能夠設置全部文件默認的編譯輸出方式，須要過濾的文件，界面語言（中文/英文）等。固然這裏也包括目前koala的版本號及做者等信息。

第二區域：project區域，能夠直接把項目拖進該區域

第三區域：需編譯的文件列表，默認如下劃線開頭的文件不出現列表中，綠色表示動態編譯的文件，灰色表示非動態編譯。單擊相應的文件，出現第四個區 塊，設置文件編譯的選項。若是你的文件是後添加的那麼請點擊上面的refresh按鈕刷新須要編譯的文件，固然也能夠經過下面的幾個all/less /sass/coffee來過濾本身要編譯的文件。

第四區域：設置文件編譯的選項，這個區域得選中第三個區域的某個須要編譯的文件纔會出現。以sass爲例，第一個選項表示是否啓用動態編譯；第二組 表示是否啓用這四個功能，我這邊爲了方便調試因此啓用debug info，固然若是你使用compass那就得啓用compass；第三組表示輸出的css格式，分爲四 種：nested，compressed，compact，expanded；最後一個compile按鈕能夠手動編譯。

既然熟悉了界面，咱們就實際使用下吧，步驟走起：

簡單的使用步驟

第一步：首先點擊咱們第一區域的那個齒輪按鈕，設置下默認文件的編譯方式，並把界面語言設置爲中文。

第二步：添加咱們要編譯的項目文件，可經過第一區域的加號那個按鈕添加，也能夠直接將項目拖到第二個project區域。

第三步：單擊咱們須要編譯的文件，出現第四區域設置下該文件具體的編譯方式，若是沒什麼特別的，直接用默認設置的就ok，若是不須要動態編譯，直接勾掉「即時編譯」那個checkbox，其他的按照上面說的操做。

第四步：右鍵單擊須要編譯的文件，出現咱們經常使用的幾個操做：打開文件，打開文件目錄，打開輸出文件目錄，設置輸出文件目錄，編譯，刪除。通常這裏咱們須要設置下咱們輸出文件的目錄。

第五步：若是你的文件既有less，sass還有coffee，那麼就最好有必須點擊下面的過濾條件，選擇你要動態編譯的文件，否則一鍋煮頭都大了。

教程走完，好了，就這麼簡單，沒什麼複雜的，本身動手試試吧。