hamlとは

Haml (HTML Abstraction Markup Language)

★概要
HTML template engine
HTMLをすっきり＆美しく
Ruby / Ruby on Rails

準備

Gemfileに追加してbundle install。

gem 'haml-rails'

使い方

基本

!!!
%html
  %body
    hello world!

入れ子構造を使うためには字下げを行う。
字下げの空白は統一する。

!!!

DOCTYPEの生成

%

タグ名の開始タグ、閉じタグを生成する

コメントアウトの書き方

html的なコメント

htmlにコメントアウトが表示される

一行

/ bodyの終わり

複数行

/
     comment
     commemt

hamlにだけコメント

一行

-# コメント

複数行

-#
     コメント
     コメント

属性の付け方

属性の書き方

%html{:lang => "ja"}
%html{lang: "ja"}
%meta(charset="UTF-8")

id、classの扱いとdivの省略

%div{:id => "main", :class => "myClass"}
%div(id="main" class="myClass")
%div#main.myClass
-# id、classは属性の中でも省略した書き方が出来る。
#main.myClass
-# さらにdivは省略可能なので、よりすっきりと書ける。

改行のコントロール

一行にまとめて書ける

%p
  hello

↓

%p hello

hamlは複数行でhtmlの表示は一行にする

haml

%ul
  %li<
    item

↓

html

<ul>
  <li>item</li>
</ul>

< : 改行をとってくれる
> : 親要素の改行をとってくれる

haml

%ul
  %li<>
    item

↓

html

<ul><li>item</li></ul>

フィルター機能

特定言語としてコンパイルする

:css
  .myStyle {
    color: red;
   }

:javascript
  alert(1);
  if (1) {
    alert(2);
  }

%div
  :escaped
    <html>
    </htlm>

:escapedは実体参照として表示する

Rubyの使い方

%p total is #{5 * 3}
-# #{}を使う
%p= Time.now
-# =を使うことも出来る
- x = 5
%p x
- (1..10).each do |i|
     -# %p= i
     %p{ :id => "item_#{i}"} #{i}
     -# 複雑な表示も出来る

参考

Hamlが5分で分るチートシート [Rails初心者チュートリアル]
Haml入門(ドットインストール)

haml 書き方 まとめ for Rails