Haml

Version 2.2.0 was released in July 2009 with support for Ruby 1.9 and Rails 2.0 or above.[2] Version 3.0.0 was released in May 2010, adding support for Rails 3 and some performance improvements. The fourth major version broke compatibility with previous versions, only supporting Rails 3 and Ruby 1.8.7 or above, and marked the switch to semantic versioning. Several amendments like increasing the performance, fixing a few warnings, compatibility with latest versions of Rails, fixes in the documentation and many more were made in the Haml 4 series.[2] Version 5.0.0 was released in April 2017. It supports Ruby 2.0.0 or above and drops compatibility with Rails 3.[2] A 'trace'[6] option, which helps users to perform tracing on Haml template, has been added.

Markup language is user-friendly if it adheres to following features:

• Easy to understand the language
• Easy of use (Implementation)

Markup language should adhere to the Don't repeat yourself (DRY) principle. It should:

• Avoid unnecessary repetitions
• Focus on clean code

Markup language with good indentation improves appearance, makes it easy to read for readers and also to determine where a given element starts and ends.

Markup language with a clear structure will help in code maintenance and logical understanding of final result. It is unclear whether Haml offers any differential advantage in this regard.

The following are equivalent as HAML recognises CSS selectors:

%p{:class => "sample", :id => "welcome"} Hello, World!

%p.sample#welcome Hello, World!

These render to the following HTML code:

<p class="sample" id="welcome">Hello, World!</p>

To use Haml with Ruby, the Ruby Gemfile should include this line:

gem 'haml'

Similar to eRuby, Haml also can access local variables (declared within same file in Ruby code). This example uses a sample Ruby controller file.[7]

• file: app/controllers/messages_controller.rb

  class MessagesController < ApplicationController
    def index
      @message = "Hello, World!"
    end
  end
  

• file: app/views/messages/index.html.haml

  #welcome
      %p= @message
  

This renders to:

<div id="welcome">
    <p>Hello, World!</p>
</div>

To use Haml independent of Rails and ActionView, install haml gem, include it in Gemfile and simply import [Usage: require 'haml'] it in Ruby script or invoke Ruby interpreter with -rubygems flag.

welcome = Haml::Engine.new("%p Hello, World!")
welcome.render

Output:

<p>Hello, World!</p>

Haml::Engine is a Haml class.

Haml uses whitespace indentation (two spaces) for tag nesting and scope. This acts as a replacement for the open-end tag pairs, making it DRY and cleaner. The following example compares the syntaxes of Haml and eRuby (Embedded Ruby), alongside the HTML output.

%div.category
    %div.recipes
        %h1= recipe.name
        %h3= recipe.category
    %div
        %h4= recipe.description

<div class="category">
    <div class="recipes">
        <h1><%= recipe.name %></h1>
        <h3><%= recipe.category %></h3>
    </div>
    <div>
        <h4><%= recipe.description %></h4>
    </div>
</div>

<div class="category">
    <div class="recipes">
        <h1>Cookie</h1>
        <h3>Desserts</h3>
    </div>
    <div>
        <h4>Made from dough and sugar. Usually circular in shape and has about 400 calories.</h4>
    </div>
</div>

'Key differences are:

• Haml doesn't have both start and end for each element like eRuby
• eRuby syntax looks a lot like HTML and is thereby more HTML-like while Haml is more CSS-like.
• Haml uses indentation to nest tag elements whereas eRuby uses the same HTML representation
• In Haml properties like class, id can be represented by ., # respectively instead of regular class and id keywords. Haml also uses % to indicate a HTML element instead of <> as in eRuby.

Note: This is a simple preview example and may not reflect the current version of the language.

!!!
%html{ :xmlns => "http://www.w3.org/1999/xhtml", :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
        All content copyright © Bob

The above Haml would produce this XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  <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>
        All content copyright © Bob
      </p>
    </div>
  </body>
</html>