Patのブログ

プログラミング、英語、科学的学習法、日々の勉強記録

Hamlの書き方

Hamlとは、Rubyを含むHTMLを簡略化して書けるマークアップ言語のこと。

今の勤め先ではHamlが使われている。

slimは使ったことがあるが、Hamlは初めてだったので調べてみた。

hamlの書き方

タグは%タグ名で表す。閉じタグは必要ない。 以下のように書くと、

%div
  %p
    Hello, Haml!

次のようにコンパイルされる。

<div>
  <p>
    Hello, Haml!
  </p>
</div>

通常のHTMLを書きたい場合はそのまま書けばよい。

%p
  <div id="main">日報</div>

は以下のようにコンパイルされる。

<p>
  <div id="main">日報</div>
</p>

クラスはドット(.)、idは#で表す。

<strong class="code" id="message">Hello, World!</strong>
%strong.code#message Hello, World!

Rubyコードを評価して欲しい場合は=を用いる。

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

ネストはスペースで表す。

<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>
#content
  .left.column
    %h2 Welcome to our site!
    %p= print_information
  .right.column
    = render :partial => "sidebar"

参照 : http://haml.info/tutorial.html