More than 5 years have passed since last update.

Hamlの書き方を簡単にまとめてみた

Last updated at 2019-04-27Posted at 2019-04-27

Hamlとは

『HTML abstraction markup language』の略で、
HTMLを生成するマークアップ言語のこと。

・　タグが省略できるため記述が少ない
・　rubyが使える
・　変数、条件分岐、繰り返しも使える

##基本の書き方

sample.html.erb

<!DOCTYPE html>
<html>
  <body>
    Hello!!
  </body>
</html>

sample.html.haml

!!!
%html
  %head
  %body
    Hello!!

####！！！
DOCTYPE宣言を生成
####％
開始タグと閉じタグを生成

##class属性

sample.html.erb

<div class ="sample">sample</div>

sample.html.haml

.sample
  sample

##id属性

sample.html.erb

<div id ="sample_id">sampleのid</div>

sample.html.haml

#sample
  sampleのid

##属性

sample.html.erb

<div class ="sample"　style="color:red">sample</div>

sample.html.haml

.sample{style: "color:red"}
  sample

Hamlを使い始めた時は、全然馴染まずかなり抵抗がありましたが、徐々に慣れてくると楽だなぁと感じるようになりました。
やっぱり、慣れって大事。