Intro to Haml

Beautiful and Clean Markup Sans Inline Code

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



  
    Welcome to our site!
    <%= print_information %>
  
  
    <%= render :partial => "sidebar" %>

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

The End

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