Skip to content

What is HAML?

Jump to bottom
DeeDeeG edited this page Apr 18, 2021 · 4 revisions

HAML is HTML and Ruby, combined.

If you know about HTML and CSS, then HAML should be fairly easy to learn.

Writing HAML is like writing HTML, but with a lot less typing, because HAML is generally set up to be a shorthand for otherwise lengthy HTML markup. (HAML can run and evaluate Ruby code as well. More on that below.)

from haml.info:

What is it?

Haml (HTML abstraction markup language) is based on one primary principle: markup should be beautiful. It’s not just beauty for beauty’s sake either; Haml accelerates and simplifies template creation down to veritable haiku.

Unspace Interactive and several other professional Rails shops use Haml exclusively for their projects, valuing its focus on cleanliness, readability, and production speed.

Give yourself 5 minutes to read the tutorial and then convert one of your ERB templates to Haml. Simplify. Enjoy. Laugh. 20 minutes later, you will never go back.

Suggested reading: http://haml.info/tutorial.html (This is a very helpful tutorial.)

For more context: https://en.wikipedia.org/wiki/Haml

Full language documentation: http://haml.info/docs/yardoc/file.REFERENCE.html

HAML is designed to replace ERB (eRuby), and can handle embedded Ruby code!

To quote Wikipedia:

eRuby (Embedded Ruby) is a templating system that embeds Ruby into a text document. It is often used to embed Ruby code in an HTML document . . .

HAML also embeds Ruby code, if you want, just like ERB does. In fact, our .haml files have a fair amount of embedded Ruby code. If it doesn't look even slightly like HTML, suffice it to say: It's probably Ruby.

Okay, so how do I embed Ruby code?

Equals (=) to Evaluate

A piece of HAML starting with = [put some Ruby code here] will run the Ruby code after the "equals" sign, get the "value" (output) from running that code, and plunk it where the "equals" sign is within the HTML document.

Example from signs.html.haml:

    = image_tag('qrcode-sign-with-handi.png', :width => "200")

This uses the Rails image_tag helper (Ruby code) to make an HTML tag with one of our gender-neutral restroom signs loaded in it as a PNG.

Hyphen (-) to Run

A piece of HAML starting with - [put some more Ruby code here] will only run the Ruby code. This is useful in order to do some operations in Ruby (math, string manipulation, setting variables... programming stuff) that impacts what you then evaluate somewhere later in the HAML file with an "equals" sign (as described above).

Example from application.html.haml:

  %body
    - if @mobile
      - # For iOS and Android clients redirecting to our pages for input of bathrooms, we will hide the header.
      %header
        = render 'layouts/header'

This checks whether the site visitor is on the Android or iOS Refuge app, and if the visitor is not using one of the apps, renders the header bar of the site. Not rendering the header makes the "Add a Restroom" page blend in more-seamlessly in the apps.

More Ruby in HAML Documentation

For more info on how Ruby code is used in HAML files, see this from the official documentation: http://haml.info/docs/yardoc/file.REFERENCE.html#ruby-evaluation

Where's the code?

All our .HAML and .ERB files are located here: https://github.com/RefugeRestrooms/refugerestrooms/tree/develop/app/views

Clone this wiki locally