Ruby on Rails - haml an alternative way to use in our views in ruby on rails - ruby on rails tutorial - rails guides - rails tutorial - ruby rails
- HAML (HTML abstraction markup language) is a beautiful and elegant way to describe and design the HTML of our views.
- Instead of opening- and closing tags, HAML uses indentation for the structure of your pages.
- Basically, if something should be placed within another element, we just indent it by using one tab stop.
- Tabs and white space are important in HAML, so be sure that you always use the same amount of tabs.
Examples
#myview.html.erb
<h1><%= @the_title %></h1>
<p>This is my form</p>
<%= render "form" %>Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - ruby on rails tutorial - rails guides - ruby rails - rubyonrails - learn ruby on rails - team
in HAML:
#myview.html.haml
%h1= @the_title
%p
This is my form
= render 'form'Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - ruby on rails tutorial - rails guides - ruby rails - rubyonrails - learn ruby on rails - team
We see, the structure of the layout is much clearer than using HTML and ERB.
Installation
Just install the gem using
gem install hamlClicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - ruby on rails tutorial - rails guides - ruby rails - rubyonrails - learn ruby on rails - team
Adding the gem to the Gemfile
gem "haml"Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - ruby on rails tutorial - rails guides - ruby rails - rubyonrails - learn ruby on rails - team
Using HAML instead of HTML/ERB, just replace the file extensions of your views from something.html.erb to something.html.haml.
Quick tipps
HTML
<div class="myclass">My Text</div>Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - ruby on rails tutorial - rails guides - ruby rails - rubyonrails - learn ruby on rails - team
HAML
%div.myclassClicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - ruby on rails tutorial - rails guides - ruby rails - rubyonrails - learn ruby on rails - team
HAML, shorthand
.myclassClicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - ruby on rails tutorial - rails guides - ruby rails - rubyonrails - learn ruby on rails - team
Attributes
HTML
<p class="myclass" id="myid">My paragraph</p>Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - ruby on rails tutorial - rails guides - ruby rails - rubyonrails - learn ruby on rails - team
HAML
%p{:class => "myclass", :id => "myid"} My paragraphClicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - ruby on rails tutorial - rails guides - ruby rails - rubyonrails - learn ruby on rails - team
Inserting ruby code
We can insert ruby code with the = and - signs.
= link_to "Home", home_pathClicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - ruby on rails tutorial - rails guides - ruby rails - rubyonrails - learn ruby on rails - team
- Code starting with = will be executed and embedded into the document.
- Code starting with - will be executed, but not inserted into the document.
Full documentation
HAML is very easy to start with, but is also very complex, so that I'll recommend reading the documentation