Intro to Haml

Beautiful and Clean Markup Sans Inline Code

Presented by Tony Gaeta / @tgaeta

What is Haml?

Haml (HTML abstraction markup language) is a markup language that’s used to cleanly and simply describe the HTML of any web document without the use of inline code.

Simply Put

It allows you to go from this...

...To This!

#content
  .left.column
    %h2 Welcome to our site!
    %p= print_information
  .right.column
    = render :partial => "sidebar"
					

Clean, beautiful, and DRY (Don't Repeat Yourself)

Core Principles

Haml’s development as a language is based on adherence to several core principles. These are:

• Markup Should be Beautiful
• Markup Should be DRY
• Markup Should be Well-Indented
• HTML Structure Should be Clear

The Basics

In Haml, we write a tag by using the percent sign and then the name of the tag. This works for any tag you want:

%strong, %div, %body, %html
					

The equal-sign tells Haml to evaluate Ruby code to the right and then print out the return value as the contents of the tag. Unlike the ERB, Haml will automatically detect newlines in the return value and format the tag properly.

%strong= item.title
				

Basics Cont.

Haml relies on indenting for formating. You indent using two spaces. Add an additional two spaces for every nested level of tags.

#content
  .left.column
    %h2 Welcome to our site!
    %p= print_information
  .right.column
    = render :partial => "sidebar"
					

We have to do this because HTML is a nested data structure. The indentation of the file is translated into HTML's opening and closing tags.

Pros

Aside from the known fact that Haml is DRY and consise, here are a few other reasons Haml is awesome:

• Easy to learn
• Easier to focus on what matters
• Easier to read and write
• No need to worry about closing tags
• Write your markup quickly

Cons

Believe it or not, you can write ugly looking code in Haml:

					%p
  Please,
  %strong
    For the love of
    = succeed "," do
      %a(href="http://www.god.com/") God
  don't use
  %a(href="http://haml-lang.com") Haml
  for marking-up your content!
					

Obviously much prettier using Markdown:

Please, **For the love of [God](http://www.god.com/),**
don't use [Haml](http://haml-lang.com) for marking-up your content!
					

Warm Up

Pros

Aside from the known fact that Haml is DRY and consise, here are a few other reasons Haml is awesome:

• Easy to learn
• Easier to focus on what matters
• Easier to read and write
• No need to worry about closing tags
• Write your markup quickly

Exercise

Resources

• Haml.info | The homepage for Haml containing tutorials, it's history, and of course, documentation
• Html2Haml Converter
• Haml Repo
• The repo containing this slide and the exercise

The End

Thanks for joining me today! If you have any questions regarding Haml or The Iron Yard, just ask.