《SASS界面編譯工具——Codekit的使用》一文中圖解了"CodeKit"圖形工具編譯SASS項目。由於CodeKit是一款付費工具，而且只能在Mac中使用，因此國內衆多SASS愛好者，或者初學者也就無法體驗CodeKit工具編譯SASS項目。幸運的是，有一款國產圖形工具Koala和CodeKit功能極其類似，支持多個平臺，而且是開源的。
Koala
Koala是一個前端預處理器語言圖形編譯工具，支持Less、Sass、Compass、CoffeeScript，幫助web開發者更高效地使用它們進行開發。跨平臺運行，完美兼容windows、linux、mac。不過在這篇文章中，我們僅介紹如何用Koala來編譯SASS項目。
Koala特性
在介紹如何使用Koala之前，我們先簡單的瞭解一下Koala具有哪些功能特性：
-
支持多語言：支持LESS、SASS、CoffeeScript和Compass；
-
實時編譯：監聽文件，當文件改變時自動執行編譯，這一切都在後臺運行，無需人工操作；
-
編譯選項：可以設置各個語言的編譯選項；
-
代碼壓縮：Less和Sass支持編譯後自動壓縮代碼；
-
錯誤提示：在編譯時如果遇到語法的錯誤，提供錯誤信息log，方便開發者定位代碼錯誤位置；
Koala下載與安裝
如果你決定使用Koala來編譯您的SASS項目，那麼你就得先安裝一個Koala。要是你是第一次使用Koala，你可以到他的官網下載對應的版本，因爲Koala提供多個環境的安裝文件：
下載您所需版本後直接點擊安裝文件，step by step就Ok了，此處就不做過多闡述了。
附逐浪官方下載源：
創建項目
要讓Koala來編譯SASS項目，首要的條件就是要有SASS項目，不然巧婦難爲無米之炊，什麼事也辦不了。因爲在自己的項目目錄下先創建一個SASS項目，在這裏我創建了一個名叫koalaSass的項目。（我一般喜歡把項目都放置在一個叫Sites目錄中）。同時創建一個sass的目錄，把項目中的所以.scss文件放置在這個目錄中：
Koala使用
Koala的使用其實非常的簡單，第一步你啓動您安裝在本地的Koala，你會看到一個很清爽的界面：
整個界面包含的內容非常的簡單，左上角有三個按鈕：“添加項目”、“Error Log”和“配置”,在整個右邊主內區域，默認是加載“項目”的界面。如下圖所示。
添加項目
Koala添加SASS項目非常的簡單，你可以點擊面板左上角的+（添加）按鈕，找到你的SASS項目，然後確認放進來：
此時你在Koala面板中，你可以看到已添加進來的Sass項目：
除了這種方法之外，還有一種更簡單的方法添加sass項目到Koala面板中，那就是直接將你的項目拖到面板右邊區域中：
一旦你的SASS項目拖到Koala主內容面板區域，鬆開你的鼠標左鍵，那麼你拖放的SASS項目就放置在Koala中，換句話說，也就是添加項目成功：
刪除項目
有時候你可能想清理一下Koala面板中的SASS項目，因爲測試的太多了，想整一個實實在在的項目，又不想其他沒用的項目干擾你的視線，那麼你就可以刪除他們。在Koala中刪除項目也非常的簡單。
你只要在Koala左邊欄項目展示區域，用鼠標“右鍵”點擊你要刪除的項目，選擇“刪除”菜單項，你就輕鬆的刪除了你想要刪除的Sass項目：
編譯SASS項目
在前面幾步，我們把koalaSass項目成功的添加到了Koala面板中，由於我們的style.scss文件裏面還沒有任何SASS代碼，我們來試編輯一下，在style.scss文件中先加入下面的代碼：
//This is sass file$color: #888;$bgColor: #f36;header {
color: $color;
background-color: $bgColor;
}保存你修改的style.scss文件。
見證神奇的時候到了，當你保存style.scss文件完成的那一刻，Koala自動的幫你完成了.scss文件轉譯成.css文件，並且將轉譯出來的.css文件都放置在css目錄下：
簡單看看編譯出來的CSS是不是正確的：
header { color: #888888;
background-color: #ff3366; }很神奇吧。
糾錯功能
Koala和CodeKit一樣，具有Debug功能，當你的SASS文件存在問題的時候，他會給您報錯，告訴您的SASS在哪個位置出錯了。這對於我們來說是非常有用的，能快速的幫助我們找到出錯代碼的位置，快速讓你糾正代碼。
同樣我們來看一個簡單的例子，我們把定義變最的$符號換成#符號，然後保存你修改的style.scss文件：
//This is sass file#color: #888;$bgColor: #f36;header {
color: #color;
background-color: $bgColor;
}你個時候在你的電腦屏幕右上角會出現錯誤的提示信息（在Win下面會顯示在屏幕右下角處）：
如果你一不小心，讓這個報錯信息消失了，你可以到編輯器中再次保存.scss文件，那麼這個報錯信息又會自動出現。要是你覺得麻煩，你可以直接到Koala面板中查看錯誤信息的記錄：
Koala功能設置
上面僅演示了Koala工具的一些基本操作，其實他還提供了其他一些強大功能，這些具體的功能，你可以在Koala的功能設置面板中進行設置。
如何設置，就不用在做過多的闡述，因爲不同的語言對應不同的參數設置，對於SASS語言來說，就那麼幾條，一眼看支就沒了，具體起什麼作用，大家可以查一下單詞，實在不想查的話，直接點點試試，一試就明瞭。(^_^)
Koala的其他功能
Koala還提供了一些常用的鼠標右鍵功能，而且您還可以多項或者全選項目中的文件，如下圖所示：
Koala與Compass的結合
你可能還記得CodeKit可以和Compass框架完美結合，常使用Compass的同學，一定離不開他，離開了你總會覺得少了什麼，你會失落，你會難以入睡。不過讓你想不到的時，使用Koala的話，他不會讓你失落也不會讓你失眠，因爲他在爲你考慮。
在Koala中同樣植入了Compass框架，不過這個功能還在Koala團隊還在開發中，不過現在也可以使用的，只是使用方法較之CodeKit略有遜色。接下來我們來看看如何在Koala中使用Compass。
第一步，也是非常重要的一步，在你的項目根目之下要創建一個compass框架所需要的config.rb文件，並在文件中配置相關的參數：
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"css_dir = "css"sass_dir = "sass"images_dir = "images"javascripts_dir = "javascripts"fonts_dir = "fonts"output_style = :nested
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = falsecolor_output = false# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sassconfig.rb文件配置完成之後，我們就可以在Koala中使用Compass了。在Koala面板的文件區域，用鼠標右鍵點擊您的Sass項目，按下圖所示方法選擇對應的菜單項：
接着Koala會出現一個提示框，向您詢問config.rb文件已經存在，您是否需要編輯他：
如果您的config.rb文件已經編輯好了，你就可以點擊 “Cancel”按鈕，繼續下面的工作。
這個時候當你編輯了項目中.scss文件之後，Koala就會自動編譯成.css文件，然後生對應的目錄，這個是跟config.rb中配置有關係了。
當然還有一種比較好的方法，那就是你需要創建Compass SASS項目的時候，就在根目中創建好config.rb文件，並且配置好，然後按照前面添加項目的方式，直接將項目添加到Koala面板中就Ok了。
基中“project setting for compass”這個功能很強大，你可以根據自己的需求配置koala-config.json文件。如果你只是普通需求，就不用這麼整了，Koala自身就能幫助完成。
目前雖然Koala和Compass這樣的框架操作相對來說體驗略差一點，但我相信後面的版本，這方面肯定會得到改善。
總結
本文主要通過創建一個SASS項目爲實例，帶領大家如何使用Koala這樣的圖形界面編譯工具來將你的SASS項目，將SASS文件編譯成CSS文件。
那麼有關於如何使用Koala編譯SASS的操作，就簡單的介紹到這裏。有關於Koala更詳細的介紹可以點擊這裏。
最後非常感謝好友Ethan Lai的精心指導，也同時非常感謝Koala團隊中的Max Deng、Leott Liu。如果大家對Koala有何想法或者改善意見，可以直接在下面的評論中留言，Koala團隊成員會及時向大家解決。
