November 30th, 2007
Ruby on Rails 的開發者有了更精簡的處理 HTML/CSS 的方式，開發起來更敏捷！
HAML 全名為 HTML Abstract Markup Language，它的主要用途是用來產生 HTML，但是它用了更精簡的方式、嚴格地縮排讓你撰寫 HTML 並結合 ERb，對於 RoR 的開發者來說，寫起來非常愉快！使用 HAML 只要記住幾個原則：
- 以空白隔開
- 記得縮排來表現結構
- %開頭的字為 HTML tag
- 不用寫 close tag
- 用 hash 的方式來指定 tag 的 attribute
比方說，原本在 RHTML 裡這樣的code:
<h1>Hello, <%= @name %></h1>
在 HAML 裡就會寫成這樣：
%h1 = "Hello, #{@name}"
若是常會使用的 Loop：
<ul id="items" class="list"> <% @user.items.each do |item| -%> <li><%= item.name %></li> <% end -%> </ul>
在 HAML 裡就可以換成：
%ul{:id => "list", :class => "list"} - @user.items.each do |item| %li = item.name
如果是整頁的 HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <%= title :site => "Foo", :separator => "-" %> <%= stylesheet_link_tag "foo" %> <%= javascript_include_tag :defaults %> </head> <body> <% unless flash[:notice].nil? -%> <div id="notice"><%= flash[:notice] %></div> <% end -%> <%= yield %> </body> </html>
換成 HAML 寫就精簡多了：
!!! 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
用 HAML 是不是感覺比較 smart 一點了呢？ :p
另外，除了 HTML 之外，CSS 也有對應的工具 — SASS，全名 Syntactically Awesome StyleSheets，概念也與 HAML 差不多，不過沒有太多規則，不過還是使用縮排來表示結構，比方說原本的 CSS 寫成：
#box { border: 0; color: black; } #box.red { border: 1px solid red; }
改成 SASS 的寫法：
#box :border 0 :color black .red :border 1px solid red
更酷的是，SASS 可以讓你的 CSS 也能吃變數：
!cool_color = #f3f; #box :border 0 :color black .cool_color :border = 1px !cool_color
如果你想在 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 吧！
文章分類: 
標籤: 
2007/12/09 1:54 am
HAML有一個缺點
我不知道在新版有沒有修正了
我記得當初用HAML開發時
表單得用HTML來寫，顯得很麻煩
SASS倒是不錯，我一直在想哪天Rails團隊會開發出一個rcss來用XD
(有rhtml、rxml、rjs，怎可以少了rcss? 哈！)