Haml and SassYour Guide to Beautiful and Sensible Markup

Jason McCayA founding partner of CommonThread

jason@commonthread.com

A bit of credit

• Created by Hampton Catlin

• Installed as RubyGem

• More advanced than you think behind the scenes

The Point

• Remove the repetitive parts of HTML and CSS

• “Markup should be beautiful”

• ...and markup should be meaningful.

The Key?

• Make white space mean something.

• Make every character mean something.

Haml FirstLet’s create a Haml Haiku

Example

• <h1 class=”title”>My Pictures</h1>

• %h1.title My Pictures

Divs are Implied

• <div class=”container”>Text</div>

• .container

• Can you imagine the characters you could cut from your front-end code right now??!?!

Heading to Textmate

Interesting Features

• Filters (plain, HTML, redcloth, textile, javascript)

• Blocks are implied by indentation

• XHTML Helpers

Okay, now to SassSimplify your CSS at no additional charge

No real change to the attributes

Beauty is in the nesting of the CSS rules

Back to Textmate

Final Notes on SassFeel the complexity leave your CSS

Interesting Features

• Arithmetic

• Silent vs. Loud Comments

• Various Output Styles

Thanks!