More than 5 years have passed since last update.

Haml記法とは

Posted at 2019-05-10

Railsでチャットアプリを作成する過程で、
View画面を実装する際に「Haml記法」を学びました!
備忘録としてまとめておきます。

Haml記法

「HTML avstraction markup langage」の略。
直訳すると「HTMLを抽象化したマークアップ言語」。
HTML/XMLを生成する為のマークアップ言語で、
より短いコードで綺麗に簡潔にコードを書くことができる記法。

Hamlでは、「%タグ名」と記載するだけで、開始タグと閉じタグに変換してくれる。
インデントを忘れないように！

index.html.haml

%html
 %body
  %div
   Hello World!

↓HTMLに変換されるとこうなる

index.html

<html>
 <body>
  <div>
   Hello World!
  </div>
 </body>
</html>

###属性は{}で
属性があるタグは、
%タグ名{属性:'属性値'}　もしくは
%タグ名{:属性=>'属性値'}　と記述する。

index.html.haml

%html
 %body
  %a{ href: 'http://qiita.com' }
   こっちはRubyのhash指定に依存している
  %a{ :href => 'htpp://qiita.com'}
　　こっちが一般的なのかな？

↓HTMLに変換されるとこうなる

index.html

<html>
 <body>
  <a href='http://qiita.com'>こっちはRubyのhash指定に依存している</a>
  <a href='http://qiita.com'>こっちが一般的かな？</a>
 </body>
</html>

###　「.」はclass属性、「#」はid属性
よく使うclass属性とid属性は、「.」と「#」で表現できる

index.html.haml

%html
 %body
  %div.contemt#content1
   .はclassで#はid

↓HTMLに変換されるとこうなる

index.html

<html>
 <body>
  <div class="content" id="content1">
   .はclassで#はid
  </div>

そして、実はdivタグの場合は%を省略できてしまう！

index.html.haml

.content#content1
 .はclassで#はid

↓HTMLに変換されると

index.html

<div class="content" id-"content1">
 .はclassで#はid
</div>

以上、Haml記法の簡単なまとめでした！
HTMLがこんなに簡単にかけてしまうなんて。。とても便利ですね！！
Halmをもっと簡単にしたSlimというマークアップ言語もあるみたいなので、
また後日調べてみようと思います！