用SASS開發網頁(二){Sass開發工具安裝&設定}

前一篇提到SASS使用的便利和好處,那麼該如何開始呢?
其實我們一般都會透過一些第三方工具輔助開發,其中包含Koala(windows/mac)、Prepros(windows/mac)、Sublime text(windows/mac)、Compass.app(windows/mac)、Fire.app(windows/mac)、線上編輯器(sassmeister)

以上工具大多都有提供多平台支援,有些依存於RUBY環境下的則必須先安裝RUBY才可以運行,例如Compass.app不過經過幾年的演進變化Compass.app的進化版Fire.app有一流的Sass/Compass支援,安裝也變得更容易不再繁瑣難以接受,以下我們將介紹Fire.app的安裝與工作環境。

  1. 首先到官網http://fireapp.kkbox.com/下載軟體,按下Download後會連到GitHub去。
    sass-001
  2. 找到適合的版本下載,這裡用windows示範
    sass-002順手解壓縮出fire.app的資料夾到自己習慣的路徑
  3. 資料夾的結構會是像這樣的狀態,我們可以點選執行檔運行
    sass-003啟動後的一些提示可以忽略,直接Start即可,主要是提示軟體已經啟動再工作列的小圖示收納區中。
  4. 找到圖示按一下滑鼠就會列出主要的功能選項
    sass-005以往這些選項都要透過Terminal或CommondLine來執行,現在已經大眾化親民許多。
  5. 開始之前我們先到Preference做些簡單設定
    sass-007Compass的部分依照專案需要選用SASS
    Compass Version
    Fire.app 預設使用最新 stable 版本的 Compass 。若是想使用其他版本的 Sass/Compass,或使用 RybyGems 來管理 ,則需使用 “Custom" 選項並且自行指定路徑。
    注意:非進階使用者不建議使用。
  6. Notification較不需要調整,Services的部分WebServer啟動後可以自行設定port便於用瀏覽器即時查看運行的結果;Enable LiveReload則是一個免去編輯後須手動重新整理的外掛,這邊不多作介紹 ,有興趣可以參考http://livereload.com/
    sass-008History會清空最近使用的專案列表。
  7. 調整完畢我們就可以開始創建專案,用CreateProject選到Compass的projectsass-009
  8. 彈出視窗打下專案名稱存檔(專案擺放位置可以自己決定習慣的路徑)
    sass-010隨後彈出一個報告列出專案的目錄結構,以及設定檔
    sass-011
  9. 回工作列檢查發現Icon進入燃燒狀態,表示已經在監看檔案
    sass-012
    點及Icon後選擇ChangeOptions再來調整一些設定
    sass-013
  10. 設定視窗中分成五個部分:
    sass-014General用來設定各個預設資料夾的名稱,例如我習慣用css來裝載css檔可以在此更改。CoffeeScript和LiveScript勾選 “Bare"時會變更 Compile 的方式,暫不詳述。Build可以選擇是否要使用UglifyJS;還有選擇在 Build Project 時是否出現Report視窗。Output Style:在選單中可以選擇 Sass 檔案輸出CSS 檔時使用的方式。
    Relative Assets:使用 compass image-url() 相關 helper 且需要以相對連結輸出 Compile 結果時勾選。
    Line Comments:選擇是否在輸出的CSS中加上標示來源Sass 行數的註解。(一般也會關閉)
    Debug info: 選擇是否在輸出的 CSS 中加上供除錯用的訊息註解。
  11. 設定完畢後點選SAVE後fire會自動產生變更的目錄和設定檔,且重新監看,以往這些事情都必須非常繁瑣的輸入指令才能完成,現在可以輕鬆完成設定了。

Leave a Reply