[快快樂樂學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 大展身手也需要經過基本的手刻過程，
再者，依照團隊與個人的習慣而定 :)
如果什麼都想擁抱，只會讓自己辛苦。