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 2Defining 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 HAMLIn 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 HAMLBy 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 boxIf 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 boxThe 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
Related protips
Have a fresh tip? Share with Coderwall community!
