I used to think HTML and CSS were fine languages. Then I met Haml and Sass, and now I see the light. But first, a little perspective is in order.

Here is the assembly code and then the C code for a simple assignment and calculation:

MOVF id3, R2
MULF #60.0, R2
MOVF id2, R1
ADDF R2, R1
MOVF R1, id1

position = initial + rate ∗ 60

Compared to assembly language, C is operating at a much higher level, with benefits too obvious to enumerate here. But don’t forget that assembly language was a huge step up from hand-rolling machine code. And also recall that C++ took C to a new level of abstraction of by adding classes and templates. A language is “high-level” only in comparison to its brethren.

So now let’s look at HTML and HAML:

<div id='content'>
  <div class='left column'>
    <h2>Welcome to our site!</h2>
    <p>
      <%= print_information %>
    </p>
  </div>
  <div class="right column">
    <%= render :partial => "sidebar" %>
  </div>
</div>

#content
  .left.column
    %h2 Welcome to our site!
    %p= print_information
  .right.column= render :partial => "sidebar"

Perhaps not as dramatic as C vs. assembly, but still impressive! And continuing in this vein:

#main {
  width: 90%;
}
#main p {
  border-style: solid;
  border-width: 1px;
  border-color: #00f;
  background-color: #55aaff;
}
#main .note {
  background-color: #55aaff;
}
#main p a {
  text-decoration: none;
  font-weight: bold;
}
#main p a:hover {
  text-decoration: underline;
}

!note_bg= #55aaff

#main
    :width 90%
    p
      :border-style solid
      :border-width 1px
      :border-color #00f
      :background-color= !note_bg
      a
        :text-decoration none
        :font-weight bold
      a:hover
        :text-decoration underline
  .note
    :background-color= !note_bg

The example above does not make it that obvious, but Sass let’s you DRY out your CSS via constants and macro-like “mixins”. It’s not just syntactic sugar.

Haml and Sass suddenly make HTML and CSS seem tedious and needlessly wordy, like assembly language of yesteryear. From now on every time I type

  <div class="myclass" id="mydiv">a meaningful statement</div>

I’ll feel silly knowing that I could have typed

  #myid.myclass a meaningful statement

if I were using Haml.

Perhaps someone will come along and find a way to make Haml and Sass look positively old-fashioned, in an endless and wonderful leapfrog race. My hat is off to those who strive to make code more beautiful, more readable, more concise. The art of programming is truly advancing.