gotagota日記

「面白きことは良きことなり」

Haml使い方メモ

ドットインストールにてHamlを勉強したので自分用メモ。

Hamlとは

HTML Abstraction Markup Language の略。

基本的な使い方としては、

  • %のあとにタグ -> 開始タグと終了タグが生成

  • インデントで入れ子構造になる

  • rubyっぽい書き方で属性を指定

%html{:lang => "ja"}

てなところ。

コメントの書き方

  • htmlにも反映したい場合 / コメント
    /
    コメント
    コメント
    コメント

  • htmlには反映したくない場合 -# コメント
    -#
    コメント
    コメント
    コメント

htmlに一行で出力する

%p hello スペースを開けて、一行で書く

hamlでだけ改行して、htmlでは改行したくない場合

    %ul
      %li<
        item
    %ul
      %li<>
        item

こうすると親要素の改行もとってくれる。

属性の指定(div)

%div{:id => "main", :class => "myClass"}

%div#main.myClass

#main.myClass
は同じ。

idとclassはよく使うのでショートカットが用意されている。 さらに、divもよく使うので省略が可能。

cssjavascripthaml内に記述する方法

:css
  .myStyle {
    color: red;
      }

このようにフィルターを利用する。

  • 便利なフィルター :escaped実体参照をしてくれる。

rubyの式を評価

%p total is #{5 * 3} #=> <p>total is 15</p>
%p= Time.now #=> <p>2014-06-05 20:25:19 +0900</p>

ただ単にrubyの命令を実行したい場合は - (マイナス)をつける。

- x = 5
%p= x #=> <p>5</p>