Haml/Sass/Compass 5min Rundown

gistfile1.md

Haml: HTML Templating Engine

• No <> or </>
• Significant Indentation

Implicit Divs

• .stuff
• .things
• #header
• .many.classes.and#an_id

CSS-selector-like naming

• %h1.foo
• %p#bar
• .last

Ruby-Hash-like attributes

• %a{ :href => "http://placekittens.com" } link_text
• %input{:selected => true}

String-Interpolation

• %p Things and #{@stuff}

Eval Ruby

• - if i_am_doin_it_rite?
.win Yep
- else
.failcat Nope

Sass: CSS Templating Engine

• No {} or ;
• Significant Indentation

$variables

• $header_height

functions()

• rgba()
• /
• *

+mixins

• +opacity(0.9)

@imports

• @import blueprint/grid
• @import compass/css3

Compass: CSS Meta-Framework

• lots of cross browser compatibility mixins
  • opacity, border_radius, text_shadow, gradients, etc.
• css framework integration
  • blueprint, 960gs, etc.
• blueprint has grid, typography, reset, etc. modules for Compass
  • blueprint/grid provides horizontal grid framework
    • +container
    • +column(3)
    • +prepend(4)
    • +push(12)
• blueprint/reset provides an html reset
  • html resets are used to provide a common set of styles to work on across all browsers
• blueprint/typography
  • basic typograhical fixes. much nicer defaults than most browsers.