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")」
コメント記法
HTML的に記述
「/ コメントだよ」
もしくは複数行書くときは
/ コメントだよ
コメントだよ
コメントだよ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