More than 5 years have passed since last update.

Hamlの書き方

Last updated at 2015-03-21Posted at 2015-03-20

htmlを記述するとき、簡単かつ簡易的に記述できるHamlについての書き方を記します。

Ruby On Rails などを扱うとき、Hamlで記述する人も多いでしょう。

ちなみに私はSlimなども好きです。

Hamlの基本

（例）

!!!
%html{lang: "ja"}
  %head
    %meta{charset: "utf-8"}
  %body
    hello world!

＜コード解説＞

を表す

%
タグの前に%を付けると< 開始タグ >と< 終了タグ >を表す。
インデントを必ず入れる
入れ子構造にする時は字下げを必ず同じスペース分入れる。
ちなみに私の場合はRubyが主ですがその他プログラムでも記述するときは字下げ（タブ幅）を2にしています。だいたい4つスペースか2つスペースなんかが一般的でしょうか。
属性を入れる場合
Ruby風に{}とシンボルで書ける。
尚、HTML風に書くなら「%html(lang="ja")」

%p
  Hello!

上記は以下となる。

<p>
  Hello
</p>

尚、一行にしたい場合は

%p Hello

上記は以下となる。

<p>Hello</p>

また、Haml上では見やすく改行して記述した場合、HTML上でも改行付きになるが、それを改行なしで表示させたい場合は以下のように**「<」**を入れる。
（例）

%ul
  %li<
    item1

これはHTML上では以下となる。

<ul>
  <li>item1</li>
</ul>

尚、親要素の改行も取り除きたい場合、逆の不等号「>」を用いる。

%ul
  %li<>
    item1

以下でも良い。

%ul<
  %li<
    item1

（例）

%div#main.mainClass

尚、「div」はよく使われるので省略可能。
slimでも同じですね。

#main.mainClass

:css
  #main {
    color: red;
  }
:javascript {
  x = 1;
  if(x == 1) {
    alert("OK!")
  }
}

◇ Hamlの中でRubyの式を評価する場合 #{} を使う。

%p #{10 * 4}
%p{id: "main-#{i}"}

◇ each、if などのロジック部分の先頭に - を記載する。

- @posts.each do |post|
  = post.title

◇ <%= ... >は = にする。yieldとrenderのときは、== にする。
== yield

356