Sass 線上編輯器 : Sass meister

網址：http://sassmeister.com/

功能：

• 線上編輯 Sass, SCSS
• 使用如 Compass 等 Extension
• 可 github 登入，可 Save Gist

像我昨天在寫 for 迴圈，只透過自己本機 watch 跟 compiler 效率很低，這種工具真的是太方便了。真是學習 Sass 的利器 :)

[快快樂樂學SASS系列] 四種 Sass 編譯後的風格（Output Style）

說明網址

Sass 編譯的風格總共有四種：

• nested (預設的樣式) : 巢狀顯示
• expanded : 不要巢狀
• compact : 簡潔樣式，縮進成一行
• compressed ：壓縮模式

實測：

[快快樂樂學SASS系列] Sass v.s SCSS

這兩個名詞實在有夠饒舌，
Sass 跟 SCSS 對我來說只是寫法不同，
或許有些人習慣 css 寫法有 { } ，結尾有 ; 分號 ，
那麼你可能會喜歡用 SCSS。
簡單來說 SCSS 可以讓你直接使用 CSS 的寫法，
但附檔名是名是 .scss，也有人說這是 Sassy CSS。

如果要寫 Sass，要用縮排 ( indented syntax ) 表示，
我比較喜歡這種，我比較懶 :P，懶得一直補 { }... xd，
如果第一次寫 sass 要小心別踩到雷，可能需要練習，
( 結尾不能有 ; 分號，width:100% 編譯不會過，：後面要有一個空格，改成 width: 100%)
初學者可以選擇先從 SCSS 上手，
會用一些技巧之後轉用縮排的寫法，
也就是改用 Sass。

剛剛實驗了一下同樣的效果用 sass 跟 scss 寫的差別：
style.sass:

 $primary_color : #fff  
 $content_width : 980px  
 body  
   color : $primary_color  
   width : $content_width - 20px  
 a   
   color : $primary_color  

style.scss:

 $primary_color : #fff;  
 $content_width : 980px;  
 body{  
   color : $primary_color;  
   width : $content_width - 20px;  
 }  
 a{  
  color : $primary_color;  
 }  

不過編譯出來的結果都一樣：

 body {  
  color: white;  
  width: 960px;  
 }  
 a {  
  color: white;  
 }  

大概是這樣子，這種東西還真的不知道能寫什麼，真的是多寫才知道...
不過，這類的 CSS extension 實現了讓你用變數, 程式邏輯去控制 css 撰寫，的確是蠻有趣的。

雖然說當了一年多的前端現在才開始接觸這樣的 CSS extension，
不過不知道為什麼沒有相見恨晚的感覺，
我還是覺得手刻有手刻的好，
畢竟要在這些 CSS extension 大展身手也需要經過基本的手刻過程，
再者，依照團隊與個人的習慣而定 :)
如果什麼都想擁抱，只會讓自己辛苦。

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


可以參考一些好文：

• 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