Sinatraでも対応している軽量／シンプルなテンプレートエンジン'Haml'についてしらべたメモ

Sinatraでも対応してる軽量／シンプルなテンプレートエンジンHamlについてしらべてみた。
そのチュートリアルを勝手に要約してみる
ERBと比較してみるとそのシンプルさがよくわかる。

タグとそのコンテント

テンプレートエンジン	記述
ERB	<strong><%= item.title %></strong>
Haml	%strong= item.title

Hamlでは"%ほげ"でタグを表す
タグにつづく=の内容はRubyの文として評価されて、その結果がタグのコンテンツになる。

タグの属性

テンプレートエンジン	記述
ERB	<strong class="code" id="message">Hello, World</strong>
Haml	%strong.code#message Hello, World

タグの属性はタグ名に続けてハッシュを記述することで設定する。
また、上記のようにタグのコンテンツがRubyのコードじゃない場合、"="はいらない。

タグの属性（CSSセレクタっぽい書き方）

テンプレートエンジン	記述
ERB	<strong class="code" id="message">Hello, World</strong>
Haml	%strong.code#message Hello, World

classやidなどの属性はCSSセレクタっぽく書く事ができる

タグは省略するとdivタグと見なされる

テンプレートエンジン	記述
なし(HTML)	<div clas='content'>Hello, world.</div>
Haml	.content Hello, world

もうちょっと複雑な例

その１

ERB

<div class='item' id='item<%= item.id %>'>
  <%= item.body %>
</div>

Haml

.item{:id => "item#{item.id}"}= item.body

属性のところでは普通に#{}での変数の展開ができる。

その２

ERB

<div id='content'>
  <div class='left column">
    <h1>Welcome to our site!</h2>
    <p><%= print_information %></p>
  </div>
  <div class="right column">
    <%= render :partial => "sidebar" %>
  </div>
</div>

Haml

#content
  .left.column
    %h2 Welcome to our site!
    %p= print_information
  .right.column
    = render :partial => "sidebar"

入れ子の構造を表す場合、インデントを使用する。

参考

#haml.tutorial