HAML

Haml is a markup language used to describe XHTML. Haml is very easy to read and enables developers to avoid explicitly coding XHTML into their templates. Haml was originally written by Hampton Catlin. Haml also includes a counterpart, Sass, for creating CSS. The official implementation of Haml has been built for Ruby with plugins for Ruby on Rails.

Haml is a templating engine for HTML. It’s are designed to make it both easier and more pleasant to write HTML documents, by eliminating redundancy, reflecting the underlying structure that the document represents, and providing elegant, easily understandable, and powerful syntax.

The first step is to install the gem:

gem install haml

Syntax for HAML

The most basic element of Haml is a shorthand for creating HTML:

%tagname(attr1=’value1′ attr2=’value2′) Contents

Adding class and id attributes is even easier. Haml uses the same syntax as the CSS that styles the document:

%tagname#id.class

In fact, when you’re using the <div> tag, it becomes even easier. Because <div> is such a common element, a tag without a name defaults to a div.

#foo Hello!

You can also put plain text as a child of an element:

%p

Hello,

World!

Example HAML

The first step to creating a view inside a Rails application using Haml is to replace .html.erb with .haml. For example, the view corresponding to the show action in a employee controller would be RAILS_ROOT/app/views/employee/show.haml

Haml is simple to use. To reproduce a XHTML tag, simply use %tag. Closing tags is not required and handled via indentation. Indentation must be 2 spaces.

#main

.note

%h2 RoR Blog

%ul

%li

Haml is indented with

%strong two spaces *only*

Which will be automatically converted to,

<div id=’main’>

<div class=’note’>

<h2>RoR Blog</h2>

<ul>

<li>

Haml is indented with

<strong>two spaces *only*</strong>

</li>

</ul>

</div>

</div>

Example 2

!!!

%html{ : xmlns => “http://www.w3.org/1999/xhtml&#8221;, :lang => “en”, “xml:lang” => “en”}

%head

%title BoBlog

%meta{“http-equiv” => “Content-Type”, :content => “text/html; charset=utf-8”}

%link{“rel” => “stylesheet”, “href” => “main.css”, “type” => “text/css”}

%body

#header

%h1 BoBlog

%h2 Bob’s Blog

#content

– @entries.each do |entry|

.entry

%h3.title= entry.title

%p.date= entry.posted.strftime(“%A, %B %d, %Y”)

%p.body= entry.body

#footer

%p

© Selva

Will generate,

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html lang=’en’ xml:lang=’en’ xmlns=’http://www.w3.org/1999/xhtml’&gt;

<head>

<title>BoBlog</title>

<meta content=’text/html; charset=utf-8′ http-equiv=’Content-Type’ />

<link href=”/stylesheets/main.css” media=”screen” rel=”Stylesheet” type=”text/css” />

</head>

<body>

<div id=’header’>

<h1>BoBlog</h1>

<h2>Bob’s Blog</h2>

</div>

<div id=’content’>

<div class=’entry’>

<h3 class=’title’>Halloween</h3>

<p class=’date’>Tuesday, October 31, 2006</p>

<p class=’body’>

Happy Halloween, glorious readers! I’m going to a party this evening… I’m very excited.

</p>

</div>

<div class=’entry’>

<h3 class=’title’>New Rails Templating Engine</h3>

<p class=’date’>Friday, August 11, 2006</p>

<p class=’body’>

There’s a very cool new Templating Engine out for Ruby on Rails. It’s called Haml.

</p>

</div>

</div>

<div id=’footer’>

<p>

© Selva

</p>

</div>

</body>

</html>

Advertisements

1 thought on “HAML”

Comments are closed.