The Haml Mammal
Do you ever feel tired of looking for closing html and end erb tags? Do you feel like it looks kind of spaghetti-like when you have a complicated view page?
Haml might be the transpiler solution you didn’t know you needed. What is Haml? It stands for “HTML Abstraction Markup Language” and according to http://haml.info/ it gives you the power to write “beautiful, DRY, well-indented, clear markup”. Sounds like a dream, right?
1. Markup should be beautiful
2. Markup should be DRY
3. Markup Should be Well-Indented
4. HTML Structure Should be Clear
Let’s first compare some code. Here is a simple form using html and erb:
<h1 id="large"> Title </h1>
<% if @condition == true %>
<%= form_for @post do |f| %>
<p><%= f.text_field :title %></p>
<p><%= f.text_area :content %></p>
<p><%= f.submit %></p>
<% end %>
<% end %>
Now, let’s see what the exact same code would look like in Haml:
- if @condition == true
= form_for @post do |f|
%p= f.text_field :title
%p= f.text_area :content
This might look intimidating at first, but notice that Haml actually looks a lot like CSS: dots before classes and #s before ids and familiar “p” and “h1” tags. Different from CSS is that in Haml the indentation is *very* important and determines how things are wrapped rather than using end tags.
.container is a class that encapsulates everything that is indented below it.
%h1 is a tag with words after it and it will generate the familiar html:
<h1> Title </h1>
Yet, you don’t need to worry about end tags! As mentioned, anything starting with
# is an id and notice you can chain together tags and classes and ids before the code they encapsulate. If I wanted to also add a class “red” to that beginning
h1 tag, it would look like:
— is the equivalent of the erb tags
<% %> and everything afterwards will be interpreted as ruby code, but not displayed.
= is basically equivalent to the erb tags
<%= %> and the result of the code after will be displayed.
You can see that the form is wrapped in a condition which is denoted by the fact that the form is indented after the conditional line.
There is a standard when using Haml to name your classes with downcase and chained with dashes instead of underlines. For example, here is a button that implements multiple Bootstrap classes:
%button.btn.btn-sm.btn-outline-secondary= link_to “View”, item’
There are HAML packages for Atom like “language-haml” or “htmltohaml” which helps you convert your html to HAML. There are also really cool websites like http://htmltohaml.com/ where you can just paste in your html and it spits out the equivalent HAML.
First start with installing the Haml gem:
gem install haml
You use HAML just like you would .erb files, except the name would be something like “show.html.haml” instead of “show.html.erb”.
I think you’ll see that in general, HAML is far more compact and readable than standard html and erb once you understand the syntax.
Are Transpilers the Future?