Beautiful Pixel

I have now begun a project that I plan to do entirely and Haml and Sass. In case that’s Greek to you, checkout this page out.

So far, I like then both. Although I like Sass much more than Haml. Maybe it’s because CSS is more broken than XHTML as far as ease of authoring. And Sass greatly improves the ease CSS authoring. The constants, the nesting, the math. It’s all just brilliant. Sass improves CSS creation in virtually every way.

For example, here’s some Sass:

1
2
3
4
5
6
7
8
9
10
11
12
13

body.home-index
  
  img.photo
    :float right
    :margin-left 5px
  
  h1
    :text-align center
    :line-height 0.9em
    
    span
      :font-size 26px
      :color #5DB63C

And the corresponding CSS:

1
2
3
4
5
6
7
8
9
10
11

body.home-index img.photo {
  float: right;
  margin-left: 5px; }

body.home-index h1 {
  text-align: center;
  line-height: 0.9em; }

  body.home-index h1 span {
    font-size: 26px;
    color: #5DB63C; }

Haml, on the other hand, does improve standard XHTML authoring quite a bit, but it comes with some drawbacks. I think this is mainly due to the whitespace restrictions. For instance, if I want this HTML.

1
2
3
4
5
6
7
8

<h1>
  Ruby<br />
  <span>on</span><br />
  Rails
</h1>
<p>
  Rails is <strong>Awesome!</strong>
</p>

I have to use this haml

1
2
3
4
5
6
7
8
9

%h1
  Ruby
  %br/
  %span on
  %br/
  Rails
%p
  Rails is
  %strong Awesome!

I guess Haml handles the block level stuff well, but the inline markup can make your template messier and harder to understand than it’s XHTML equivalent.

The other thing that bothers me about Haml is the lack of closing tags. I know, this is by design of the language. But what I am used to is to create a closing tags along side every opening tags. The bodies of those tags get flushed out, and I know exactly where the next element goes based on the closing tag. With only indents to guide your nesting, I have had to scroll up and down in a big page and try to discern just where a particular element stops. Or what indent level to stick a new element.

Perhaps, I’m just set in my ways. I think I’ll get used to it, but it still bothers me a bit. And, to be clear, I still think this is an improvement on RHTML and plan to use it in more projects.

Short Version

• Haml: Cooler than Rhtml, most of the time.
• Sass: Utterly and Completely fantastic