[快快樂樂學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 有檢視版本訊息，應該不會有問題，至少我是這樣看的...。

編輯器語法變色設定

• Sublime Text 有 SASS package
• https://github.com/WhatWeDo/Sublime-Text-2-SASS-Package
• 不過我沒有試過 :P

以一個網站的資料夾為例

這是我的網站目錄:
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。

	{
	"name": "sass_test",
	"version": "0.1.0",
	"author": {
	"name": "WinWu",
	"url": "http://yiyingloveart.blogspot.tw/"
	},
	"devDependencies": {
	"grunt": "~0.4.1",
	"grunt-contrib-sass": "~0.5.0"
	}
	}

view raw sass_demo_package.json hosted with ❤ by GitHub

Gruntfile.js:

	module.exports = function(grunt){
	grunt.initConfig({
	pkg : grunt.file.readJSON('package.json'),
	sass:{
	dist: {
	options:{
	style: 'expanded'
	},
	files:{
	'style.css': 'style.sass',
	}
	}
	}
	});
	grunt.loadNpmTasks('grunt-contrib-sass');
	grunt.registerTask('default',['sass']);
	}

view raw sass_demo_gruntfile.js hosted with ❤ by GitHub

接著在 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 怎麼用。
其實網路上的教學看一看，不難上手。


可以參考一些好文：

• SASS用法指南 作者： 阮一峰
• Modern Frontend Development with Sass & Compass 作者：Sven Wolfermann
• http://sass-lang.com/documentation/file.SASS_REFERENCE.html
• Sass & Compass / W3CTech Shanghai by Liang-Bin Hsueh
• Getting started with Grunt and Sass