haayaaa’s diary

日々学んだことについてまとめていきます。主にruby、rails、javascript、HTML、CSSについてです。

HAML

Hamlとは?

Hamlとは、railsにおけるHTML用のテンプレートエンジン。erbの代替品。

マークアップは美しくあるべき」という原則に基づいて開発された。

Hamlを使うとよりViewファイルを綺麗に・読みやすく・生産的に作成することができる。

拡張子は、〜.html.haml となる。

 

erbだと

<div id = 'content'>
  <div class = 'left column'>
    <h2>弊社のサイトへようこそ!</ h2>
      <p> <%= print_information%> </ p>
  </ div>
  <div class = "right column">
    <%=render:partial=> "sidebar"%>
  </ div>
</ div>

だったものが hamlだと、

#content
 .left.column
  %h2弊社のサイトへようこそ!
  %p =print_information
 .right.column
=render:partial => "sidebar"

となる。

 

●erbからhamlへの書き換え方

>、を削除し、先頭に%をつける。また、閉じタグも削除。

(例:<strong> <%= item.title%> </ strong> →%strong = item.title)

 

eachif などのロジック部分の先頭には - をつける。end はつけない。

 

<%=…>は=にする。

 

class属性やid属性は、それぞれ . # にを先頭につける。%p.fields %#contents などとする。

(例:<div class = 'content'>こんにちは、世界!</ div> →.contentこんにちは、世界!)

 

⑤タグが div の時は div を省略し #content と記載できる。(略さず書くと %#content)

 

class属性やid属性以外のhrefimgなどの属性を追加したい場合は、ハッシュで記載。

(例: %a{href => #} リンクテキスト)

 

⑥複数のクラスを記載したい場合は、. (コロン)でつなげる(例: input.btn.btn-default.btn-sm)

 

⑦インデント重要。少し違うだけでエラーが起きる。