haml.md

Basics

Tags

Anything with a % denotes an html tag

%div text here

becomes:

<div>text here</div>

Indentation

Haml uses indentation to format the HTML structure. A tag’s children are indented beneath the parent tag. Again, a closing tag is automatically added. For example:

%ul
  %li list item 1
  %li list item 2

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
</ul>

A # represents an ID definition

#foo text here

<div id="foo">text here</div>

A . represents a Class definition

.bar text here

<div class="bar">text here</div>

Putting it all together

#foo.bar text here

<div id="foo" class="bar">text here</div>

Add additional properties

%a.my-link(href="filename.html" target="_blank")
  %img.my-image(src="filename.jpg")

<a href="filename.html" class="my-link" target="_blank">
  <img src="filename.jpg" class="my-image" />
</a>

Nesting Rules

If you want to have multiple lines nested within a single HTML object ie; <div>Some text with <span>spanning text</span> in the middle</div> You will need to make sure each item is on it's own line.

THE FOLLOWING CODE IS INVALID

%div Some text with
  %span spanning text
  in the middle

THE FOLLOWING IS VALID CODE

%div
  Some text with
  %span spanning text
  in the middle

Scripting

Interpolation

You can use #{} to interpolate ruby inside of a string

%div(id="#{item.id}")

Access to ruby

There are a few ways to denote that you want to parse ruby code. A couple of those are are by beginning a line with a - (hyphen) or = (equals). There is also interpolation, which I will explain next.

When using a - it means "The result of this should not be printed to html"

- foo = bar unless foo?

When using an = it means "The result of this should be printed to html"

.user-login
  = @loggedIn ? "Logged in" : "You are not logged in"