HTML: (Paste ERB code below and press Convert to HAML button) |
HAML: (Paste HAML code below and press Convert to ERB button) |
Convert HTML to HAML is very easy process. Haml is a templating system that is designed to avoid writing inline code in a web document and make the HTML cleaner. Haml gives the flexibility to have some dynamic content in HTML. htmltohaml is best tools for Rails developers.
# How To Use In Your Ruby On Rails Application
HAML (HTML abstraction markup language) is a beautiful and elegant way to describe and design the HTML of your views. Instead of opening- and closing tags, HAML uses indentation for the structure of your pages
Examples:
File #new.html.erb
<h1><%= @page_name %></h1>
<p>This is my form</p>
<%= render "form" %>
And in HAML:
File: #new.html.haml
%h1= @the_title
%p This is my form
= render 'form'
You see, the structure of the layout is much clearer than using HTML and ERB.
Installation
First install the gem using
gem install haml
and add the gem to the Gemfile
gem "haml"
For using HAML instead of HTML/ERB, just replace the file extensions of your views from file_name.html.erb
to file_name.html.haml
.
Quick tipps
Common elements like divs can be written in a short way
HTML
<div class="myclass">Write Content Here</div>
HAML
%div.myclass
HAML, shorthand
.myclass Write Content
Here
Attributes
HTML
<p class="myclass" id="myid">My paragraph</p>
HAML
%p{:class => "myclass", :id => "myid"} My paragraph
Inserting ruby code
You can insert ruby code with the = and - signs.
= link_to "Home", root_path
Code starting with = will be executed and embedded into the document.
Code starting with - will be executed, but not inserted into the document.