Haml

Hamlとは §

Haml (HTML Abstraction Markup Language) はRubyのテンプレートエンジンの一つで、HTMLを簡潔に読みやすく書くためのマークアップ言語であり、以下の特徴がある。

• 簡潔な記述:
  • インデント（スペースやタブの数）を使ってHTMLの要素のネスト（入れ子）を表現する。これにより閉じるタグが不要となりコードが簡潔になる。
• Rubyの組み込み:
  • Rubyのコードを直接埋め込むことができる。
• 自動的なエスケープ
  • デフォルトでHTMLエスケープを行います。これにより、クロスサイトスクリプティング（XSS）といったセキュリティリスクを低減することができる
• 高度な機能:
  • パーションテンプレート、フィルタ、ヘルパーなどの機能を提供する

公式サイト §

• Haml

記述例 §

ERBを書き換える §

ERB

<strong><%= item.title %></strong>

このERBをHamlで書くと以下のようになる。

Haml

%strong= item.title

属性の追加 §

HTML

<strong class="code" id="message">こんにちは、世界!</strong>

このHTMLをHamlで書くと以下のようになる。 Haml

%strong{:class => "code", :id => "message"} Hello, World!

以下のように書くこともできる。 Haml

%strong.code#message Hello, World!

デフォルトのタグ §

タグを省略した場合%divとして扱われる。 Haml

.content Hello, World!

HTML

<div class='content'>Hello, World!</div>

より複雑な例 §

ERB

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

このERBをHamlで書くと以下のようになる。 HAML

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

ERB

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

このERBをHamlで書くと以下のようになる。

HAML

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

コメントを書く §

HTMLに出力するコメント §

一行の場合は以下のように書く。

/ コメントです

複数行の場合は以下のように書く。

/
  コメントです
  これもコメントです

Hamlにだけ書きたいコメント §

一行の場合は以下のように書く。

-# コメントです

複数行の場合は以下のように書く。

-#
  コメントです
  これもコメントです

フィルタ機能 §

:css
  .fulieColor {
    color: aqua;
   }
 
:javascript
  alert('pass');
  if (f) {
    alert('true');
  }
 
:ruby
  clubs = {
	  fulie: yokohamafc,
	  reds: urawareds
  }