Edited at

Hamlの書き方

More than 3 years have passed since last update.

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

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

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


Hamlの基本

(例)

!!!

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

<コード解説>

1. !!!

<!DOCTYPE html>を表す


2. %

タグの前に%を付けると< 開始タグ >と< 終了タグ >を表す。


3. インデントを必ず入れる

入れ子構造にする時は字下げを必ず同じスペース分入れる。

ちなみに私の場合はRubyが主ですがその他プログラムでも記述するときは字下げ(タブ幅)を2にしています。だいたい4つスペースか2つスペースなんかが一般的でしょうか。


4. 属性を入れる場合

Ruby風に{}とシンボルで書ける。

尚、HTML風に書くなら「%html(lang="ja")」


コメント記法


  1. HTML的に記述


    「/ コメントだよ」


    もしくは複数行書くときは


    / コメントだよ

    コメントだよ

    コメントだよ


  2. HTMLには反映させないけどHamlの中では反映させたい場合


    -#」を「1」と同様に記述する。



改行

%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


id、classなどの属性指定方法

(例)

%div#main.mainClass

尚、「div」はよく使われるので省略可能。

slimでも同じですね。

#main.mainClass


styleタグ、scriptタグを入れる場合

:css

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


RailsでのerbファイルをHamlに変換する場合

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

%p #{10 * 4}

%p{id: "main-#{i}"}

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

- @posts.each do |post|

= post.title

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

== yield