Hamlの基礎知識 #haml

初めてHamlのファイルを見ると結構とまどいますよね。
でも慣れるとすっごく楽に書けるようになりそう！
ということで、基本の基本だけですが、書き方をメモしておきますφ(..)

基礎知識

!!! DOCTYPEの指定
% 開始タグと終了タグ
<div>は省略可
# id
. class
- 表示はしないがRubyでなにかしらの処理をする
= #{} Rubyの処理結果を表示
/ コメント

例

上が、上記の基礎知識を使ってhamlで書いたもの、下がそれをhtmlに変換したものです。

!!!
%html
  %body
    #hoge.piyo
      %p hello
      - X = 100
      %p= x
      %p １足す１は #{1 + 1}
  / コメント

※字下げできちんと親子関係を指定しないとエラーになります。

↓↓↓これをhtmlで見てみると

<!DOCTYPE html>
<html>
  <body>
    <div class="piyo" id="hoge"></div>
      <p>hello</p>
      <p>100</p>
      <p>１足す１は 2</p>
  </body>
  <!-- コメント -->
</html>

どうでしょうか？？
今までerbを使っていると慣れるまでかなり抵抗があって読みにくいですが、
実際に使ってみると、その楽チンさに驚きます！！！
覚えることも意外と少ないので、積極的に取り入れたいですね(･∀･)