【haml】クラス名を設定する【class】

はじめに

hamlによるマークアップを進める中で
クラス名の設定で少し苦戦したので備忘録として残します。

クラス名設定の基本

「%div」に「hogehogeクラス」を設定します。
これは以下のように記述することで正常に動作します。

  %div{ :class => 'hogehoge'}
  %div{ class: 'hogehoge'}

  //以下のように { の前にインデントが挟まるとエラーが出ます。
  %div { :class => 'hogehoge'}
  %div { class: 'hogehoge'}

「{}」と「class」は省略可能

これでコードもだいぶスッキリします。

  %div.hogehoge

さらに「%div」も省略可能

divタグに関してはここまで省略しても問題なくクラス名が設定されます。

 .hogehoge

補足）%div以外の省略はここまで

 %p.hogehoge
 %a.hogehoge
 %span.hogehoge
 %ul.hogehoge
 %li.hogehoge

補足）クラスは続けて複数設定可能

 %div.hogehoge.btn
 //「hogehoge」「btn」の2つのクラスを設定しています。

rubyの要素にクラス名を設定する

rubyのコードをhamlに記述する時には「-」や「=」に続いて記述を行います。

ここで引っかかりました...
form_forのtext-field（テキストフィールド）やsubmit（送信ボタン）にクラス名を設定する時、
「.」に続いてクラス名を設定することに慣れた後だったので
なんとか「.」を使ってクラス名を設定できないかと固執してしまいました。

最終的に、以下のように基本に立ち返って
クラス名を設定することでエラーなく動作しました。

  .form
    = form_for [@message] do |f|
      .input-box
        = f.text_field :text, { :class => 'input-text' }
      = f.submit "Send", { :class => 'submit-btn' }
//{ class:'input-text' }{ class:'submit-btn' }でも問題なく動作します。

これも省略が可能で、以下のように記述しても問題なく動作します。

  .form
    = form_for [@message] do |f|
      .input-box
        = f.text_field :text, class: 'input-text'
      = f.submit "Send", class: 'submit-btn'

終わりに

以上、Haml記法におけるクラス名設定方法の簡単なまとめでした。
HTMLがとても簡単に書けるようになってとても便利ですが、
慣れない内は今回のような小さな苦戦も頻発するかと思います。
またつまづいたら、詳しく調べてアウトプットしようと思います。
転んでもただでは起きぬ！