by Matt Didcoe
Haml and Sass: Wonder Twins Unite!
Huh? What?
HTML (and its cousins/siblings/bastard children such as XHTML) is a markup language that is interpreted by the web browser to render a web page. A large amount of the actual code in HTML is taken up with closing off tags and general housekeeping. Having to repeatedly type “</p> and </div>” gets to be annoying. And large amounts of grief can be caused, particularly when you’re trying to debug an error in your code because the page isn’t working as intended.
RubyOnRails and Templating Languages
RubyOnRails is based on the MVC programming pattern. Basically this means that the various functional parts of the website are contained within designated parts (Model = Business logic, View = Presentation of data, Controller = Making it all work together). RubyOnRails has a templating language, ERb, which is used to embed programmatic functionality within an HTML template. Basically this means that you can include Rails code in a familiar environment, and have Rails generate your HTML for you.
Here’s an example.
<div id="user_list">
<ul>
<% @users.each do |user|%>
<li><%= user.name %></li>
<%end %>
</ul>
</div>
OK, that’s a pretty basic example, but effectively what’s happening is that the Rails engine loops over a collection of users, and generates the HTML code to display a list of users. Doesn’t look too bad, but when you start getting a complicated page, it can start getting really difficult to work out what’s going on where.
Surely we could do better? (AKA why do I have to type so much crap?)
Thankfully, there’s a better way. Hampton Caitlin is a developer who also got annoyed at having to write necessary, but pointless code all the time. He felt that it could be done much better by a computer. So, he created Haml.
Haml allows you to write legible, even beautiful, templates for your websites, and takes care of most of the heavy lifting for you.
Crash Course in Haml
The easiest way to explain Haml is to use an example. Here’s the code from above, rewritten in HAML
#user_list
%ul
-@users.each do |user|
%li= user.name
Not too bad. 5 lines to replace 7. And not an angle bracket to be seen! Of course, it’s a pretty simplistic example, but should give you an idea of what can be achieved.
So, how does it work? Haml makes great use of whitespace, and tabs. The indenting in your template code is used to determine the hierarchy of your code. For example:
#container
%h1 Inside the container
#box
%h3 Inside the box
will generate
<div id="container">
<h1>Inside the container</h1>
<div id="box">
<h3>Inside the box</h3>
</div>
</div>
If you change the indenting like so
#container
%h1 Inside the container
#box
%h3 Inside the box
you get
<div id="container">
<h1>Inside the container</h1>
</div>
<div id="box">
<h3>Inside the box</h3>
</div>
This illustrates the power of Haml (and a potential source of bugs!). With the change of nothing more than an indent, it’s possible to greatly influence the generated code. The use of indenting also makes for legible, and beautiful code.
Haml Shortcuts
Haml also has some wonderful timesaving shortcuts that means you don’t need to sweat the details as much.
!!! XML
!!!
%html{html_attrs}
will generate
<?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/xhtml '>
Nice.
Crash Course in Sass
Not long after the initial versions of Haml were released, it became obvious that CSS needed some Haml-ification. Sass to the rescue.
Sass takes the approach of Haml, and applies it to the world of CSS selectors and attributes. It makes the creation of large stylesheets, with complex parent/child relationships, and makes it a simple thing.
Nothing like an example. To create the following:
#container{
width : 100px;
margin : 10px 2px 5px 0px;
border : 1px solid #fff;
}
#container p{
font-family : Helvetica, Arial, sans-serif;
font-size : 1em;
color : #000;
}
you would write
#container
:width 100px
:margin 10px 2px 5px 0px
:border 1px solid #fff
p
:font-family Helvetica, Arial sans-serif
:font-size 1em
:color #000
Once again, you can see the power of indenting being used to create parent/children relationships. And the Sass example is eminently more “readable”, which helps with debugging and maintenance of code.
So, it’s only a Rails thing right?
Well, sort of. It’s really a Ruby thing, as Haml has been included, or been made to work with, Merb and Sinatra, two other web development frameworks based on Ruby. I’m not aware of any attempts to get it working with other languages.
But all is not lost! Hampton has got a Haml Lab up and running, so you can test it all out, and see how much time it could save you.
In Conclusion
Go Team “Haml and Sass”!
