如何使用Less/Sass編譯工具koala

　　一、SASS調試外掛程式的方法

　　如需調試功能，請在編譯輸出的時候輸出debug資訊，那樣解析的css檔案中就會包含debug資訊，然後通過firebug或Google的調試工具就可以定位到我們編輯的scss檔案，而不是解析後的css檔案。

　　如果光做好SASS的準備工作還不夠，還需要讓瀏覽器支援SASS。那麼就需要一個瀏覽器的外掛程式才能讓瀏覽器識別SASS，從而方便開發人員進行開發。

　　如需調試功能，請在編譯輸出的時候輸出debug資訊，那樣解析的css檔案中就會包含debug資訊，然後通過firebug或Google的調試工具就可以定位到我們編輯的scss檔案，而不是解析後的css檔案。(1-1)

　　如果你的css檔案中沒有以@media -sass-debug-info開頭的代碼，說明沒有輸出debug資訊。請重新使用koala工具編譯你的scss檔案，並確定已經勾選了debug資訊這個選項。

　　在Firefox中調試，只需要再下載FireSass→https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/即可。

　　

　　1、進入http://koala-app.com/頁面

　　2、根據系統下載所需要的koala的版本

　　3、然後在下載檔案夾中安裝下載的EXE檔案，即可安裝成功

　　三、編譯工具koala的優點

　　1、多語言支援：支援Less、Sass、CoffeeScript 和 Compass Framework。

　　2、Just-In-Time 編譯：監聽檔案，當檔案改變時自動執行編譯，這一切都在後台運行，無需人工操作。

　　3、編譯選項：既可統一設定檔案的編譯選項，也可單獨設定某個檔案的編譯選項。

　　4、強大的檔案右鍵功能：右鍵檔案元素，即可操作開啟檔案，開啟檔案目錄，開啟輸出檔案目錄，設定輸出檔案目錄，編譯，刪除六大常用功能。

　　5、錯誤提示：在編譯時間如果遇到文法的錯誤，koala將在右下角彈出錯誤資訊，方便開發人員定位代碼錯誤位置。

　　6、跨平台：windows、linux、mac都能完美運行。

　　7、免費且負責：koala完全免費，而且作者很負責，有什麼問題作者都會及時給予回覆，意見什麼的可以直接提交給作者，一般在下一個版本就能得到解決。

　　四、版面地區介紹(1-2)

　　1、第一地區：第一個按鈕用於添加項目，第二個按鈕開啟編譯檔案的錯誤提示，第三個按鈕設定koala，裡面可以設定所有檔案預設的編譯輸出方式，需要過濾的檔案，介面語言(中文/英文)等。當然這裡也包括目前koala的版本號碼及作者等資訊。

　　2、第二地區：project地區，可以直接把項目拖進該地區

　　3、第三地區：需編譯的檔案清單，預設以底線開頭的檔案不出現列表中，綠色表示動態編譯的檔案，灰色表示非動態編譯。單擊相應的檔案，出現第四個區塊，設定檔案編譯的選項。如果你的檔案是後添加的那麼請點擊上面的refresh按鈕重新整理需要編譯的檔案，當然也可以通過下面的幾個all/less/sass/coffee來過濾自己要編譯的檔案。

　　4、第四地區：設定檔案編譯的選項，這個地區得選中第三個地區的某個需要編譯的檔案才會出現。以sass為例，第一個選項表示是否啟用動態編譯;第二組表示是否啟用這四個功能，我這邊為了方便調試所以啟用debug info，當然如果你使用compass那就得啟用compass;第三組表示輸出的css格式，分為四種：nested，compressed，compact，expanded;最後一個compile按鈕可以手動編譯。

　　

　　1、第一步：首先點擊我們第一地區的那個齒輪按鈕，設定下預設檔案的編譯方式，並把介面語言設定為中文。(1-3，圖1-4)

　　2、第二步：添加我們要編譯的專案檔，可通過第一地區的加號那個按鈕添加，也可以直接將項目拖到第二個project地區。

　　3、第三步：單擊我們需要編譯的檔案，出現第四地區設定下該檔案具體的編譯方式，如果沒什麼特別的，直接用預設設定的就ok，如果不需要動態編譯，直接勾掉“即時編譯”那個checkbox，其餘的按照上面說的操作。(1-5)

　　4、第四步：按右鍵需要編譯的檔案，出現我們常用的幾個操作：開啟檔案，開啟檔案目錄，開啟輸出檔案目錄，設定輸出檔案目錄，編譯，刪除。一般這裡我們需要設定下我們輸出檔案的目錄。(1-6)

　　5、第五步：如果你的檔案既有less，sass還有coffee，那麼就最好有必須點擊下面的過濾條件，可以選擇你要動態編譯的檔案。(1-7)

　　如何使用Less/Sass編譯工具koala?就為大家介紹到這裡，希望能為大家有所協助，在困擾sass或者less的時候，不妨到夢龍小站看一看。