別館 子子子子子子(ねこのここねこ)

2015-02-02

Hamlメモ

Haml リファレンス

Attributes: {}

Brackets represent a Ruby hash that is used for specifying the attributes of an element.

%html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"}

is compiled to:
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'></html>

HTML-style Attributes: ()

Haml also supports a terser, less Ruby-specific attribute syntax based on HTML’s attributes.

%html(xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en")
%a(title=@title href=href) Stuff

This is the same as:
%a{:title => @title, :href => href} Stuff
%a(title=@title){:href => href} Stuff

そのうちチートシート作ろう。

注意事項

Ruby ではシンボルにハイフンを含めることが出来ません。ので Hamlハッシュのキーにシンボルを使うときにもハイフンは厳禁です
例えば Twitter Bootstrap で Modal を使うときに

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

とありますが、ハッシュキーとして data-toggle や data-target をそのまま使ってはいけません。使うと syntax error, unexpected tLABEL エラーになってしまいます。ですのでハイフン付きのキーは

%button.btn.btn-primary.btn-lg{type: "button", :'data-toggle' => "modal", :'data-target' => "#myModal"} Launch demo modal

とする*1か、またはハッシュでは無く丸括弧の引数にして

%button.btn.btn-primary.btn-lg(type="button" data-toggle="modal" data-target="#myModal") Launch demo modal

にしましょう。
ラクなのはハッシュと丸括弧を混ぜた表記だと思います。ありがたいことに、ハッシュと丸括弧の順序は問いません。

%button.btn.btn-primary.btn-lg{type: "button"}(data-toggle="modal" data-target="#myModal") Launch demo modal
%button.btn.btn-primary.btn-lg(data-toggle="modal" data-target="#myModal"){type: "button"} Launch demo modal

また、ハッシュの中にハッシュを入れるとシンボル名をハイフンで繋いだキーを生成してくれるという設定を利用して次のようにも書けます(読みやすいような読みづらいような)。

%button.btn.btn-primary.btn-lg{type: "button", data: {toggle: "modal", target: "#myModal"} } Launch demo modal


Haml チートシート

インデントにさえ気をつければそのままHTMLを書くことも可能です。

へー。 Haml はインデントにかなりウルサいようですね(コメントアウトも正しくインデントしないと怒られた)。
ところでこの↑チートシートだと属性が HTML 的に () で書いてあるのが気になる。

英語だけど一枚物で見やすい。

具体的に Haml で書いてあるのが良い。

tips

おまけ: Haml と Slim を比較

Haml のほうが(私には)良い感じ。

*1Ruby 2.2以降ならば :'data-toggle' => "modal"'data-toggle': "modal" と書けます。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

リンク元
My Google+