hamlでの属性の書き方

Hamlで属性を書く時にHashのキーをシンボルにする場合、
-(ハイフン)が使えないという欠点がある。

%span{data-hogehoge: 'mokemoke'}
%span{:data-hogehoge => ‘mokemoke'}

とかは、エラーになる。

%span{"data-hogehoge": 'mokemoke'}
%span{:"data-hogehoge" => 'mokemoke'}

これでも構わないが、もっと綺麗に書くなら
ハッシュを階層化することも可能で
Haml側では自動的に「-」区切りしてくれるようになっている。

%span{ data: { hogehoge: 'mokemoke' } }
%span{ :data => { :hogehoge => 'mokemoke' } }

のように指定することができます。
ちなみにこれは、dataだけが特別なのではなく、
属性として指定するHashの階層は、ハイフンで繋げられる。

%span{ fuga: {hoge: { piyo: 'mokemoke' } } }

この場合、fuga-hoge-piyo = 'mokemoke'という属性が指定される。
特に、カスタムデータを複数指定したい場合が以下のように記述できるため、
よりスマートに記述することが可能。

%span{"data-hoge": 'data1' , "data-fuga": 'data2' , "data-piyo": 'data3'}

上記が、

%span{ data: { hoge: 'data1', fuga: 'data2', piyo: 'data3'} }

こんな風に記述できて、どちらも以下のような変換結果になる。

<span data-fuga="data2" data-hoge="data1" data-piyo="data3"></span>