Hamlの書き方

Hamlとは？

* HamlとはHTML abstraction markup languageの略 * HTMLのコードをより効率よく書くことができる * PHPやRubyOnRailsで使用される * エディター上のhamlファイルは、ブラウザ上ではHTMLのコードに変換されて表示される

公式サイト
https://haml.info/

HTML⇄Haml変換サイト（勉強用）
https://htmltohaml.com/

基本的な書き方

||HTMLでの書き方|Hamlでの書き方| |----|----|----| |DOCTYPE宣言||!!!| |コメント（HTMLコードに変換される）||/ コメント| |コメント（HTMLコードに変換されない）||-# コメント| |タグ|``|%body| |class属性|`

`|.class1| |id属性|`

`|#id1| |属性|`

`|.class2{style: "color:red"}| |属性|`

`|.class2{:style => "color:red"}| |cssを適用|``|:css| |javascriptを適用|``|:javascript| |式埋め込み|<% price = 500 * 1.1 %>|- price = 500 * 1.1| |文字列埋め込み|`<%= item.name %>`|=item.Name|

• Hamlでは、属性付きのdivタグはdivを省略可能です。
• 以下の例文のようにインデントをつけることで階層構造をつけることができます。

Sample.html.haml

!!!
 %html
  %body
   %table
    %tr
     %td 列1
     %td 列2
     %td 列3