[Ruby] [Rails] haml code chart

less than 1 minute read

Github Official Haml-rails Tutorial HamlTutorial

Introduction

Gemfile


# Add below `bundle install`
gem "haml-rails", "~> 2.0"

For Rails 4
gem "haml-rails", "~> 1.0.0"
# For Rails3
gem "haml-rails", "~> 0.4.0"

Convert html.erb to html.haml $ rails generate haml:application_layout convert When converting all erb files $ rails haml:erb2haml

HTML code

erb


<div>blue</div>
<div class="sky">blue</div>
<div class="sky">blue</div>
<div class="sky" id="line">blue</div>

haml


%div blue
%div.sky blue
.sky blue
.sky#line blue

Ruby code

erb


<% if user_signed_in? %>
  <%= hoge %>
<% else %>
  <%= skyblue %>
<% end %>

haml


- if user_signed_in?
  = hoge
- else
  = skyblue

Nest

erb


<div class="header-nav">
  <nav>
    <ul class="nav-list">
      <% if current_user %>
        <li class="list-item"><%= content %></li>
        <li class="list-item" id="sky"><%= link_to "blue" %></li>
      <% else %>
        <li class="list-item"><%= content %></li>
        <li class="list-item" id="sky"><%= link_to "blue" %></li>
      <% end %>
    </ul>
  </nav>
</div>

haml


.header-nav
  %nav
    %ul.nav-list
      -if current_user
        %li.list-item= content
        %li.list-item#sky= link_to "blue"
      -else
        %li.list-item= content
        %li.list-item#sky= link_to "blue"