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もよく使うので省略が可能。
cssやjavascriptをhaml内に記述する方法
: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>