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

ruby 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