aivizg
Last Updated: February 25, 2016
·
1.165K
· sativaware
Unknown

Introduction to HAML

What is HAML?

Haml is a markup language that is used to cleanly and simply describe the HTML of any web document without the need to hand-code HTML.

HAML can easily be integrated with both Sinatra and Ruby on Rails - which allows you to write your views in HAML.

A typical HTML document

Lets look at the HTML markup for a typical page seen on the web:

<html>
  <head>
    <title>Sativaware : Introduction to HAML</title>
  </head>
  <body>
    Haml is a markup language  ...
  </body>
</html>

In this HTML document we see opening & closing tags for fundamental HTML tags such has head, title and body - in addition to being nested within each other. The indenting is for reading convenience only and its structure is derived from nesting the elements.

Lets now take a look at the same typical page, in HAML:

%html
  %head
    %title 
      Sativaware : Introduction to HAML
  %body
    Haml is a markup language  ...

The document becomes more concise. The fundamental elements are defined with a prefixed percentage sign(%) followed by the name of the element i.e %head, %body. HAML is indented using white-space, which forms the structure - closing tags are omitted.

Here are some common HTML elements you will be familiar with - expressed in HAML(Note the white space indenting)


%h1 I am a big header
%h2 Slightly smaller header
%h3 An even smaller header

%span
  I am inside a span element

%div
  A div element

%p
  A paragraph of text

%ul
  %li First unordered item
  %li Second unordered item

%table
  %tr
    %td I am Cell 1
    %td I am Cell 2

Defining element IDs

A common aspect of describing an HTML document is giving elements ids and assigning css classes — lets take a look at assigning an id to a div element.

<div id='main-section'>
  Sativaware : Introduction to HAML
</div>

In haml we can express the above as follows

%div#main-section
  Sativaware : Introduction to HAML

In HAML — Element IDs are prefixed with a hash(#) i.e #main-section and again we see a div being created using the percentage sign(%) prefix followed by the name of the element i.e %div

If we want to make the HAML more consise we can use the following:

#main-section
  Sativaware : Introduction to HAML

By default, HAML will assume a div element where an element tag(i.e. %div) is ommited.

Assigning CSS classes on elements

Lets say we have two CSS classes in your stylesheet as follows:

/* stylesheet.css */

.box {
  background-color: #F5F5F5;
}

.rounded {
  border-radius: 10px;
}

To make use of these two CSS classes in HAML - lets create a div and assign the .box class.


%div.box
  This is a box

If you wanted to expand on that and add the additional .rounded css class you would do the following:


%div.box.rounded
  This is a rounded box

The above examples would produce the following HTML respectively:

<div class='box'>
  This is a box
</div>

<div class='box rounded'>
  This is a rounded box
</div>

Reference links

Intro to HAML on sitepoint.com

Intro to HAML screencasts.org

HAML's official site

HAML tutorial

Say Thanks
Respond