[快快樂樂學SASS系列] Sass 開發環境設定 (搭配 Grunt)

  
(Grunt img source : http://gruntjs.com/img/grunt-logo.png)
(Sass img source :http://sass-lang.com/assets/img/logo-235e394c.png)

SASS 開發環境設定,搭配 Grunt 

SASS 需要 Ruby 才能編譯。
所以你一定要有 Ruby 的環境,若只裝 Grunt 是無法編譯的。
Grunt 只是 Task Runner,別誤會一定要用 Grunt...。
SASS 是 CSS 的 Extension Language,可以用比較靈活, 寫 SASS,最後透過 Grunt,幫你去處理編譯的工作 (猜測 Grunt 會請 ruby 編譯),最後產出 css 檔案。

當初選擇 Grunt 是考慮到整個開發方式最後也需要使用 Grunt 進行 css 壓縮等整合的功能,所以選擇 Grunt。對了,不是說一定要 Grunt 才能編譯 SASS,再次強調它只是幫你做事情的工具。
若你以透過 ruby 安裝 SASS :

  1. sudo gem install sass

你可以直接透過 command line 編譯 sass 產出 css 檔案:
  1. sass style.scss output_style.css

就先談到這裡,剩下的留到之後再講,SASS 太多人在用了,歡迎大家上網爬好文。


環境必需品 (我是 Mac)
每種作業系統有不同的裝法,可參考 http://sass-lang.com/install(你也可以選擇使用一些現有的 Application)。

  • 安裝 ruby  ( Mac本來就有 ruby的環境 )
  • 安裝 sass ( sudo gem install sass) 
  • 要有 node.js 環境並且安裝 NPM (node package manager)
    注意,如果你安裝的 Grunt 版本大於 0.4.x , 那你的 node.js 版本要高於 0.8.0
  • 安裝 Grunt
  • 註:
    • 檢測是否有ruby : ruby -v
    • 檢測使否有node: node -v
    • 檢測是否有裝 npm: npm -v 
    • 檢測使否有 grunt : grunt -V (大寫V)
    • 若以上帶 -v 有檢視版本訊息,應該不會有問題,至少我是這樣看的...。

編輯器語法變色設定



以一個網站的資料夾為例

這是我的網站目錄:
style.css 不會是我要編輯的 css 檔,style.sass 才是,我會讓 style.sass 編譯後去蓋掉 style.css 這個檔案。

 demo_web    
   |-index.html       
   |-style.css    
   |-style.sass
   |-README.md  


接著新增 package.json 以及 Gruntfile.js 這兩個檔案:
這兩個檔案我都寫得很基本,除了這個範例,也就是 sass 會用到的東西之外,也沒加入什麼其他的相依性套件了,通常,Gruntfile.js 會用到很多套件,像是 cssmin, uglify 等等,只是在這邊簡單化。

 demo_web    
   |-index.html       
   |-style.css    
   |-style.sass
   |-README.md     
   |-Gruntfile.js  
   |-package.json  

package.json:
package.json 的相依性除了要有 grunt 之外,也要包含 grunt 的 sass 的套件,也就是 grunt-contrib-sass
Gruntfile.js:

接著在 command line 到資料夾根目錄,以我來說是 /Users/win/Sites/demo_web。

接著下 npm install ,把會用到的相依性套件下載下來,接著就會產生 node_modules 目錄。

 npm install  

接著編輯我的 style.sass:
寫一些簡單的 sass
 $primary_color : #fff  
 body  
   color : $primary_color  
 a   
   color : $primary_color  

編輯完 sass 之後,下 Grunt 指令,就開始幫你工作了:)

Done, without errors,沒有任何編譯的 error 就會出現這句,接著再去看 style.css 編譯後的結果就可以了。


這是 before 跟 after 的結果:


實在挺方便的,接著就是好好看熟 SASS 怎麼用。
其實網路上的教學看一看,不難上手。


可以參考一些好文:




留言

這個網誌中的熱門文章

[Android] 筆記 手機上測試自己的 APP

解決fatal: Not a git repository (or any of the parent directories): .git錯誤

[Android 筆記] 設定 ImageView 的圖檔來源