[轉]SCSS 和 SASS 和 HAML 和CoffeeScript

Asset Pipeline 提供了內建直接使用 Sass 撰寫 CSS 的功能。 

你也許會生出這樣的疑惑：什麼是 Sass？ Why should I care? 

Sass (Syntactically Awesome Stylesheets) 原先是內建在 Haml 中的一個副功能。 

利用縮排設計避免製造難以 debug 的 syntax error 

Haml 

要談 Sass，就不得不先來談 Haml 這個 project。 Haml 全名爲 HTML Abstract Markup Language，它是提供網頁設計師撰寫 HTML 的另一條途徑。 

透過 Haml，你能夠很快的使用它的 syntax 寫出結構穩固的 HTML。 

網頁設計師常常有一個煩惱：在撰寫 HTML 時要是忘記關一個 TAG，在瀏覽器中整個版面可能就會大爆炸，而這樣的 Bug 倒是很難被抓出來的。 

Haml 主要就是讓開發者，可以使用縮排的方式撰寫 HTML，輕鬆作到永不忘記關 Tag 的效果。如下是 Haml 範例： 

%h1= "Hello World"

產生出來的 HTML 就會長這樣 

<h1>Hello World</h1>

而 

%ul{:id => "list", :class => "menu"}
    %li= "Item 1"
    %li= "Item 2"
    %li= "Item 3"

會產生出來這樣的 HTML 

<ul id="list" class="menu">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
 </ul>

使用 Haml 撰寫 HTML 的好處 

Haml 是須要使用縮排撰寫，再行 compile 的 markup language。它可讓你： 

阻絕撰寫出錯誤結構的 HTML TAG 的機會 
只要 syntax 一錯誤，編譯就沒法成功。利用這樣的特性，很容易阻絕寫出會在瀏覽器由於 TAG 結構錯誤而難以 debug 出的 HTML。 

輕鬆調整排版 
在網頁設計開發階段，若要大幅調整 HTML 結構，對網頁設計師也是很傷腦筋的一件事。由於大幅的搬動 HTML，一般有時候會形成：「少剪到一個 TAG」或 「改了開頭 TAG ，卻忘了改關閉 TAG 」的憾事。 

在 Haml 中，這些情況都不會發生。由於 Haml 自己就屬於「塊狀結構」、「自我 close」。所以不論怎樣搬動和調整，只要符合縮排，幾乎都不會爆炸。 

使用 Haml 撰寫 HTML 的壞處 

如此 powerful 的 markup language 爲什麼沒有風行？反卻是原先屬於副功能的 Sass 大紅特紅。 

緣由就在於 Haml 的特性：不僅須要被機器 compile，它也須要被人腦 compile。 

HTML 自己就是一門至關直觀的 markup language。 

在撰寫 Haml 時，排版雖然至關輕鬆。但接手維護 Haml 版面的人，卻一般痛苦不堪。由於「很是不直觀」。 

這也是 Haml 的反對者，批評最力的地方。 

多數人沒法接受維護不直觀的「任何東西」，加上撰寫 Haml 須要另外學習特殊的 syntax。沒有壓倒性的好處，通常人是不會貿然進行技術投資的。這也是爲何 Haml 始終處是小衆技術的主要緣由。 

Sass / SCSS 

拉回來談 Sass，Sass 原先是附屬在 Haml 裡面的一個副功能。這也是 sass-convert 這個指令必需要安裝 haml 這個 gem 才能使用的緣由。 

Sass 的原理，是讓開發者能夠透過「縮排」的方式去撰寫維護 CSS，一樣能夠避免忘記關 TAG 而大爆炸的糗事。 

而由於 CSS 的結構特性，形成了 Sass 與 Haml 大相徑庭的命運。多數人反對 Haml，是由於 Haml 反而形成了 HTML 在閱讀上的不直觀。 

而 Sass 的語法 

.content
  margin: 2em 0
  h1
    font-size: 2em

產生出 

.content{
 margin: 2em 0;
}
.content h1{
   font-size: 2em;
}

反倒讓 CSS 的維護變得直觀了。 

接觸 Sass / SCSS 後的很多開發者甚至認爲，縮排 block 的撰寫方式纔是 CSS 在被髮明時應該被設計出來的樣子。 

如今撰寫 CSS 的方式，有一個絕大缺點：只要在結構上涉及巢狀或多個 class，維護者就必須複製貼上 style。很多人認爲這真是愚蠢至極且煩人透頂的設計。 

內建 Killer features 讓維護 CSS 變得更簡單 

Sass 也提供了其餘便利功能，如變數、函數、數學、繼承、mixin …等等功能。 

在進行網頁 protyping 時，更改全站配色或者是直接提供兩個以上的設計，對設計師來講是屢見不鮮的事。 

但更改全站配色倒是至關麻煩的一件事，由於「尋找 + 全數取代」，並不能保證最後會有正確的結果。頗有可能：你更改了全部 CSS 中涉及連結的顏色，卻發如今全數取代的過程當中，不當心也改到邊框的顏色。 

若能使用變數去指定特定 style 的顏色，該有多好。 

變數 ( Variables ) 

$border-color: #3bbfce
$link-color: #3bbfcf
.content
   border-color: $border-color
   a
     color: $link-color

CSS 

.content{ border-color: #3bbfce; }
.content a{color: #3bbfcf; }

數學 
在調整區塊寬度時，你也但願：每次調整寬度時，可不能夠不要每次都按計算機，再全數手動修改… 

.content
   width: (500px/2);

.content{ width: 250px; }

內建函式 
在調整顏色亮度時，你但願能否無需再開調色盤，直接改 CSS 就讓 style 暗一點？ 

$color = darken(#800, 20%)
.content
   $color

.content{ #200; }

這都還只是 Sass 所提供的當中一小部分基礎功能而已，卻足以讓網頁設計師驚豔十足了。加上撰寫維護時十分直觀，這也難怪爲什麼 Sass 只是 Haml 中的副功能，後繼的聲勢浪頭卻遠高於 Haml 自己。 

SCSS 

那 SCSS 又與 Sass 有什麼差異，他們看起來好像是相似的東西？ 

是這樣的，Sass 原先使用的縮排，對於網頁設計師來講，仍是至關不直觀。並且實務上也不能直接將舊有的 CSS 直接貼進 Sass 中。其實仍是存在必定的不方便度。也所以 Sass 進行了進化，改良了 syntax，而 Sass 3 後來就被稱爲 SCSS ( Sassy CSS)。 

它的 syntax 與 CSS 原有的 syntax 徹底 compatible，使用了 { } 去取代原先的縮排方式。 

好比說原有的 

.content
   margin: 2em 0
   h1
     font-size: 2em

在 SCSS 中變成了 

.content{
   margin: 2em 0;
   h1 {font-size: 2em }
 }

在撰寫上，更加無比的直觀，同時也能將舊有的 CSS 直接貼進去，徹底沒問題！SCSS 更新增了很多關於 CSS3 的 feature 函式。 

就拿我最愛的背景漸變色來講好了，原先要作漸變色，CSS 必需要這樣寫： 

#linear-gradient {
  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
  background-image: -webkit-linear-gradient(left top, #ffffff, #dddddd);
  background-image: -moz-linear-gradient(left top, #ffffff, #dddddd);
  background-image: -o-linear-gradient(left top, #ffffff, #dddddd);
  background-image: -ms-linear-gradient(left top, #ffffff, #dddddd);
  background-image: linear-gradient(left top, #ffffff, #dddddd);
}

由於你必須支援全部的 Browser。 

但在 SCSS 中，一行就搞定了！ 

#linear-gradient { @include background-image(linear-gradient(left top, white, #dddddd)); }

小結 

爲何 Rails 3.1 鼓勵推行 Sass？由於 Sass / SCSS 實在能夠大幅節省 網頁設計師 / 開發者維護網站程式的功夫。 

而在這章中，其實我還沒講到 Rails 3.1 真正整合 Sass 的重點：「Compass」。「Compass」是一套 SCSS 的 Framework。它纔是最強大的工具。images 

http://upgrade2rails31.heroku.com/sass-scss/