Hamlの書き方

  • 143
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

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