認識 HAML 及 SASS 作更敏捷的 Web 開發

Ruby on Rails 的開發者有了更精簡的處理 HTML/CSS 的方式,開發起來更敏捷!

HAML 全名為 HTML Abstract Markup Language,它的主要用途是用來產生 HTML,但是它用了更精簡的方式、嚴格地縮排讓你撰寫 HTML 並結合 ERb,對於 RoR 的開發者來說,寫起來非常愉快!使用 HAML 只要記住幾個原則:

  • 以空白隔開
  • 記得縮排來表現結構
  • %開頭的字為 HTML tag
  • 不用寫 close tag
  • 用 hash 的方式來指定 tag 的 attribute

比方說,原本在 RHTML 裡這樣的code:

Hello, <%= @name %>

在 HAML 裡就會寫成這樣:

%h1 = "Hello, #{@name}"

若是常會使用的 Loop:
[code lang="xml"]

    <% @user.items.each do |item| -%>

  • <%= item.name %>
  • <% end -%>

[/code]
在 HAML 裡就可以換成:
[code lang="ruby"]
%ul{:id => "list", :class => "list"}
- @user.items.each do |item|
%li = item.name
[/code]
如果是整頁的 HTML:
[code lang="xml"]




<%= title :site => "Foo", :separator => "-" %>
<%= stylesheet_link_tag "foo" %>
<%= javascript_include_tag :defaults %>


<% unless flash[:notice].nil? -%>

<%= flash[:notice] %>

<% end -%>
<%= yield %>


[/code]
換成 HAML 寫就精簡多了:
[code lang="ruby"]
!!! Strict
%html{html_attrs}
%head
= title :site => "Foo", :separator => "-"
%meta{:http-equiv => "Content-type", :content => "text/html;charset=UTF-8"}
= stylesheet_link_tag "foo"
= javascript_include_tag :defaults
%body
- unless flash[:notice].nil?
%div#notice = flash[:notice]
= yield
[/code]
用 HAML 是不是感覺比較 smart 一點了呢? :p

另外,除了 HTML 之外,CSS 也有對應的工具 -- SASS,全名 Syntactically Awesome StyleSheets,概念也與 HAML 差不多,不過沒有太多規則,不過還是使用縮排來表示結構,比方說原本的 CSS 寫成:
[code lang="css"]
#box {
border: 0;
color: black;
}
#box.red {
border: 1px solid red;
}
[/code]
改成 SASS 的寫法:
[code lang="ruby"]
#box
:border 0
:color black
.red
:border 1px solid red
[/code]
更酷的是,SASS 可以讓你的 CSS 也能吃變數:
[code lang="ruby"]
!cool_color = #f3f;
#box
:border 0
:color black
.cool_color
:border = 1px !cool_color
[/code]

如果你想在 RoR 的 project 中使用 HAML 及 SASS,只要安裝這個 plugin:


script/plugin install http://svn.hamptoncatlin.com/haml/tags/stable

然後 HAML 的檔案副檔名可為 .haml 或 .html.haml,而 SASS 的副檔名為 .sass,而使用 HAML 有個建議,就是開發時可以把在 HAML 中的邏輯判斷部份放進 helpers 裡面,如此可以讓你的 HAML 更精簡。

RoR 的開發者,不妨試試看 HAML 及 SASS 吧!