編譯工具CodeKit:將SASS編譯成很好的CSS

文章簡介：SASS介面編譯工具——Codekit的使用.

在《SASS編譯》和《Nodejs+Grunt配置SASS項目自動編譯》教程中，我們詳細介紹了使用sass和使用grunt命令完成SASS項目的轉譯任務，其中還可以使用sass --watch和grunt watch命令實現時時監控SASS項目，一旦修改任何SASS檔案，都會自動將SASS檔案轉譯成CSS。

當然，我們可以通過系統內建的命令列或者其他的終端命令工具，實現SASS的編譯工作，但對於前端設計人員而言，雖然常用能記得住這些命令，終究會覺得不習慣。為此，我們可以使用APP應用來協助我們完成SASS編譯工作，從此告別使用命令來轉譯SASS。

目前為止，有關於SASS編譯的介面工具數不勝數，例如：Scout、CodeKit、LiveReload、Compass、Fire以及國產的編譯工具Koala等。其中前幾款都是付費工具，唯有Koala是免費的。

孰好孰壞，我們不做過多的評論與對比。從我個人出發，我更趨向於CodeKit、Compass和Koala。由於Compass無法擷取到破解版本，同時CodeKit與之無太多區別，所以在我的Mac系統中，我安裝了CodeKit。今天特意和大家一起分享一下使用CodeKit的一點經驗。

CodeKit簡介與安裝

CodeKit可以協助更快更好的建立網站。也可以為你所用，幫你將SASS編譯成很好的CSS。他可以幫你處理很多事情，比如說：可以將Less、Sass、Stylus、Jade、Haml、Slim、CoffeeScript和Javscript等編譯成你自己需要的東西。以及瀏覽器重新載入、代碼壓縮、最佳化映像和JSHint & JSLint等功能，但是我們這裡僅使用他來編譯SASS。首先從CodeKit官網下載下來安裝他（要美刀喲，找個破解版本吧）。安裝後跟著我們繼續往下看，我想你會喜歡上Codekit的。

建立測試專案

為了能開始使用Codekit編譯SASS，需要建立一個項目，並在項目中建立SASS，並且將所有SASS檔案儲存到sass目錄中。例如此處建立了一個名叫"codekitSass"的項目，裡面放置了一個sass目錄，並且建立一個測試檔案style.scss：

只有項目存在，而沒有測試的SASS代碼，是無法向大家示範“CodeKit”如何將SASS編譯成CSS， 因此在style.scss檔案中寫了SASS的代碼：

Codekit基本使用

測試專案建立完成之後，就可以實際學習CodeKit的操作，掌握Codekit如何將SASS編譯成CSS。

首先啟動您安裝好的"Codekit"：

在"CodeKit"面板中點擊左下角加號+，將剛才新建立的codekitSass項目添加到"CodeKit"檔案地區中：

當你的SASS項目添加到"CodeKit"檔案地區之後，“Codekit”會自動找到您SASS項目中的所有sass檔案：

選擇要編譯的.scss檔案，在面板中右邊“參數設定地區”設定對應的參數，最後點擊面板右下角那個綠色的“Compile”按鈕，"CodeKit"會將選擇中的.scss檔案轉譯成.css檔案：

如果你不知道"CodeKit"是否將SASS編譯成功之時，除了回到檔案目錄中查看之外，你還可以在“CodeKit”面板中點擊Log，查看"CodeKit"編譯之後的"Log"資訊。

這個時候回到剛才建立的"codekitSass"項目，你可以看到“codekit”把sass目錄下的style.scss檔案編譯成style.css檔案，並且把這檔案放置在css目錄下：

在"CodeKit"中添加項目成功之後，只要修改了項目中的任何SASS檔案，只要你儲存這個檔案之後，“CodeKit”會自動將SASS檔案編譯成CSS檔案，其功能類似於sass --watch功能。這個時候再次查看“Log”資訊，你可以看到新增的資訊：

"CodeKit"很聰明，當你寫了一個無效的SASS代碼之後，"Codekit"在編譯SASS的時候就會報錯，而且在“Log”中也能找到對應的報錯資訊。這一功有非常強大，也非常有用，他可以協助我們Debug相關的 SASS代碼。例如，在SASS中，我們定義變數是使用$，我們來做一個測試性的實驗，將定義變數的$符號換成#，然後儲存修改的SASS檔案。在“CodeKit”中將會報錯：

“CodeKit”的報錯機制，如同其他的驗證器一樣，並不總是容易理解驗證錯誤資訊。但這個報錯機制，對於我們來說協助非常大了，它可以協助指向SASS代碼發生錯誤的位置，讓你第一時間找到出錯的地方，並且糾正過來。

CodeKit與Compass的完美結合

如果您閱讀了《SASS編譯》一文，我想你對Compass並不會太陌生。在文中我們瞭解到Compass是一個很強大的SASS架構。SASS結合Compass可以讓你省去很多麻煩事情，因為他裡麵包括了很多內建的SASS功能與效果。具體裡麵包含了什麼，我也很不清楚，如果您想瞭解Compass包含了什麼，你可以猛擊這裡或者通過下面命令將Compass複製到你的本地：

$ git clone https://github.com/chriseppstein/compass.git 

Compass 和SASS結合在一起，我們可以在命令列中實現，除此之外，還可以通過Compass.app介面工個完成。那麼前人就有人在思考，能否在CodeKit中容入Compass架構呢，讓你的SASS項目更具完美。接下來，我們來看看CodeKit和Compass是如何完全的結全在一起建立SASS項目。

在開始使用之前，假設定你已經安裝了SASS和CodeKit。你可以開啟你的命令終端或者其他命令工具，在裡面輸入：

安裝Comapss

$ gem install comapss 

檢測版本號碼

$ compass -v 

建立Compass+Sass項目

在需要建立Compass+Sass項目的目錄下輸入：

$ compass create Your-Project-Name 

詳細的介紹大家可以閱讀《SASS編譯》一文，此處我們只是再次回憶了一下compass和sass如何結合在一起建立具有"Compass"架構的SASS項目。

我們回到今天的主題之上來，同樣我們建立一個測試專案，名叫“compassSass”的項目，並且放置在Sites的目錄下（因為我的所有項目都是放置在Sites目錄下）。

現在在"compassSass"這個項目中，我們沒有任何檔案和目錄：

按照前面的方法，將"compassSass"項目添加到“CodeKit”面板的檔案地區中：

關鍵時刻到了，用滑鼠在"CodeKit"面板的檔案地區選取項目你的項目，並用滑鼠右鍵點擊項目，按照下圖所示，做出選擇：

注意：你的Compass項目必須要用一個config檔案來引導"CodeKit"工作。你可以通過命令列來建立，也可以使用codekit來建立。

在"CodeKit"面板中右擊項目選擇Compass→Use Compass on this project將會彈出一個對話方塊：

一旦你告訴CodeKit使用compass建立這個項目，CodeKite需要一個支援compass的config.rb檔案，如果沒有配置一個config.rb檔案，現在我們必須讓CodeKit建立一個新的config.rb檔案。從上圖中我們可以得知建立config.rb檔案有三種方法：

建立一個全新的config.rb檔案

選擇彈出對話方塊的“New Config File”按鈕：

此時產生config.rb檔案，內容如下：

# Require any additional compass plugins here.  # Set this to the root of your project when deployed: http_path = "/" css_dir = "stylesheets" 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 = false color_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 sass 

安裝Compass

選擇“Install Compass”按鈕來產生config.rb檔案：

此時產生的config.rb檔案與前面產生的檔案內容基本類似：

# Require any additional compass plugins here.  # Set this to the root of your project when deployed: http_path = "/" css_dir = "stylesheets" 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 = false color_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 sass preferred_syntax = :scss 

使用本地config.rb檔案

第三種方法就是你本地已經存在一個config.rb檔案，我們可以點擊“Locate”按鈕，載入本地的config.rb檔案：

上面任意一種方法都將幫你輕鬆完成CodeKit建立Compass+Sass項目，只是第三種主法，需要你建立一個config.rb檔案，如果你對建立config.rb檔案不熟悉，我建議您使用第一種或第二種方法。

正如前面所言Codekit除了上面的功能之外，還有其他更有意思的功能，也你可以進行CodeKit系統設定中，按照您的需求進行詳細設定：

在彈出的對話方塊，你就可以慢慢設定了：

如何設定，我就不多說了，有興趣的可以參閱CodeKit官網。

擴充閱讀

• CodeKit
• Compass
• ACTIVATE COMPASS CAPTAIN
• Sass for Designers — The Setup
• Using Codekit
• CodeKit and SASS