I hate writing HTML. Wait. Let me rephrase that. I hate writing and reading HTML.
Compared to Ruby, Perl, and even SQL code, HTML is just so… verbose. Crafting open and close tags is taxing; nesting is error prone; and it’s difficult to simply glance at HTML to grok its purpose. CSS is even worse. Because a stylesheet is a long, flat, unstructured list, it’s nigh impossible to discern those cumulative rules that apply to nested elements. A good editor helps, but syntax coloring is often just a shiny veneer.
And many concur with my distaste for HTML. Alternatives, such as Textile and Markdown—aptly named since it’s intended to be the opposite of markup—provide author-friendly shorthand that is programatically promoted into full-blown HTML. For example, the Markdown snippet…
Ordered lists use numbers followed by periods:
1. Bird
2. McHale
3. Parish
… produces the HTML…
<p>
Ordered lists use numbers followed by periods:
</p>
<ol>
<li>Bird</li>
<li>McHale</li>
<li>Parish</li>
</ol>
Markdown is very natural to write—it resembles text you might put in an email, say— and thus very easy to read, too. It’s no wonder that many content management systems, blogs, and wikis support simplified markup of Markdown’s ilk.
Ideally, Markdown would replace weighty, tagged text in my applications, but it wasn’t designed to be a wholesale replacement for HTML and provides no relief for CSS. Yet, the notion is very appealing: Keep (or add) structure, lose the infernal typing.
And that’s the exact charter of HAML and companion SaSS. HAML (short for XHTML Abstraction Markup Language) expresses HTML in an outline form, while SaSS (an acronym for Syntactically Awesome StyleSheets) does the same for CSS. Both provide conveniences such as macros and expressions, and structure is implied with active white space (a la Python). You can also embed code in outline form: no blocks required.
I use HAML and SaSS with Rails, but implementations of HAML are available for Merb, PHP 5, Python, and .NET. And if your programming language does not yet support HAML or SaSS, have no fear! There are command-line utilities to convert the minimalist templates into HTML and CSS. There’s also a pair of utilities to reduce HTML and CSS to HAML and SaSS, respectively.
I eschew other templating forms in favor of HAML. It makes me very productive, even happy to craft Web pages and forms. Let’s take a look.
Less Code, More Joy
At left is HAML; at right is the equivalent HTML generated with the haml command-line utility.
!!! XML
!!!
%html
%head
%title
Example
%body
%h1 You can place text on this line
%p#vip.prose
Or you can put more lengthy text
here as content.
<?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/...">
<html>
<head>
<title>
Example
</title>
</head>
<body>
<div id='main'>
<h1>You can place text on this line</h1>
<p class='prose' id='vip'>
Or you can put more
lengthy text here as content.
</p>
</div>
</body>
</html>
HAML is concise and its syntax is simple. For instance:
- To use an element, preface its tag with %, such as %head and %p.
- You can assign an ID to an element with the clause #your_id. You can assign one or more classes to an element with a set of .your_class clauses. You can also combine the two kinds of clauses.
- If the element is a div, you can omit %div and it is inferred.
- To nest an element or place content within an element, simply indent two spaces. For convenience, you can also place content on the same line as the element, if the text is short.
This first example does not demonstrate all the syntax available. You can find the complete HAML reference online.
HAML is full of other tricks, too. If you like Markdown, you can embed it in HAML. A filter expands the Markdown in place. This snippet…
%div
:markdown
Example 2
=======
Hello, *World*
… produces:
<div>
<h1>Example 2</h1>
<p>Hello, <em>World</em></p>
</div>
In the HAML code, the keyword :markdown invokes the eponymous filter. A filter exists for JavaScript, Textile, SaSS, plain text, and Ruby code, among others.
And because all browsers aren’t equal, you can also insert Internet Explorer conditionals using /[condition].
/if[IE]
%p
Use the Firefox, Luke.
The slash (/) denotes a comment in HAML. You can use slash to comment a single line or an entire, indented section.
/ This is a single-line comment
/
#footnote
%p None of this will render since its part of the comment
(9 votes, average: 3.44 out of 5)
Loading ...
