Haml, Sass and Compass for Sane Web DevelopmentJeremy Weiskotten

@doctorzaius

(We’re hiring.)

QuickTime™ and a decompressor

are needed to see this picture.

Haml

QuickTime™ and a decompressor

are needed to see this picture.

QuickTime™ and a decompressor

are needed to see this picture.

QuickTime™ and a decompressor

are needed to see this picture.

Mark Hamill may not be beautiful, but…

“Markup should be beautiful.”

http://haml-lang.com

Is this beautiful?

No.

QuickTime™ and a decompressor

are needed to see this picture.

HTML Tags

%p My paragraph.

%span= @user.first_name

%ul %li Item 1 %li Item 2

Tags with IDs and Classes

%p#summary

%span.hint

%p#summary.magnificent.bastard

Tags with Attributes

%img{:src => ‘images/tree.jpg’, :alt => ‘My favorite tree’}

Produces…

<img src=“images/tree.jpg alt=“My favorite tree” />

Tags with Attributes

%a.new{:href => new_thing_path} Click me!

Produces…

<a class=“new” href=“/things/new”>Click me!</a>

Tags withHTML 5 Data Attributes%ul.todo %li{:data => { :priority => 1, :cost => 0 }} Kick ass %li{:data => { :priority => 2, :cost => 1 }} Chew bubble gum

<ul class=“todo”> <li data-priority=“1” data-cost=“0”>Kick

ass</li> <li data-priority=“2” data-cost=“1”>Chew bubble

gum</li></ul>

Attributes, HTML-style

%img(src=‘images/tree.jpg’ alt=‘My favorite tree’)

%a.new(href=new_thing_path) Click me

Attribute helpers

%body{ body_attributes }

def body_attributes { :id => controller.controller_name, :class => controller.action_name }end

Attribute helpers

%li{ user_li_attributes(person) }

def user_li_attributes(user) {}.tap do |attr| attr[:id] = dom_id(user) attr[:class] = ‘active’ if user == current_user endend

Flow & Output

- if signed_in? = current_user.first_name- else = link_to ‘Sign in’, sign_in_path

- content_for :head do = javascript_include_tag ‘foo’

QuickTime™ and a decompressor

are needed to see this picture.

Not.

Haml Sucks for Content *

• Whitespace pain, particularly around punctuation

• Content is not structure• Use a filter for inline content markup

* See http://chriseppstein.github.com/blog/2010/02/08/haml-sucks-for-content/

Content Filters

•:textile, :markdown, :maruku, etc.

.summary :textile h1. Welcome, #{current_user.name}.

If you’re not, *#{current_user.name}*, “sign out”:#{sign_out_path}!

JavaScript Filter

:javascript var annoyingMsg = ‘Welcome, #{current_user.first_name}!’;

$(function() { $(‘#welcome’).html(annoyingMsg); });

So why do I like Haml?

So why do I like Haml?

• Clean, well-structured source– Easy to write, read & maintain

So why do I like Haml?

• Clean, well-structured source– Easy to write, read & maintain

• Encourages good practices– Minimal code in the view– Extract helpers, partials

So why do I like Haml?

• Clean, well-structured source– Easy to write, read & maintain

• Encourages good practices– Minimal code in the view– Extract helpers, partials

• Better mental mapping to CSS

gem install haml

Sass

CSS that doesn’t suck(as much)

Sass is a big deal.

QuickTime™ and a decompressor

are needed to see this picture.

Typical CSS

Sass Nested Rules

Parent Selector

a { text-decoration: none; &:hover { text-decoration: underline;

}}

Typical CSS

Sass Mixin

Variables

$highlight-color: #ff0;

span.highlight { background-color: $highlight-color;}

OMG COLOR MATH!

$highlight-color: #ff0;

span.highlight { background-color: $highlight-color; color: darken($highlight-color, 70%);}

Other Kinds of Functions

• Color saturation, hue• Opacity• Math (round, ceil, floor, abs)

• Units• Extensible: Add your own

What does it mean?

• CSS programmability• Composition• Reuse• Organization• Better separation of presentation from structure and content

A few more things...

• @import• @extend• @if / @else• @for, @while

http://sass-lang.com

QuickTime™ and a decompressor

are needed to see this picture.

Compass

It’s a framework

• …for frameworks• Built on Sass• Easy integration with Rails, Rack, Ramaze, Sinatra, …

• Fresh, minty breath

Lots of toys!

QuickTime™ and a decompressor

are needed to see this picture.

With the Having of Many Useful Mixins

• Border radius• Box shadow• Float clearing (without markup)

• Image replacement

I don’t even know what most of these things

are• Resets• CSS3 transitions• Sticky footer• Table striping• And lots more!

Grid Systems

Without Class-plosion• Blueprint• 960.gs• Susy• YUI• etc

Fancy Buttons

QuickTime™ and a decompressor

are needed to see this picture.

.logo { background: sprite-image("lemonade/lemonade-logo.png");}.lime { background: sprite-image("lemonade/lime.png");}.coffee { background: sprite-image("other-drinks/coffee.png") no-repeat;}

Lemonade

Questions?

• Did you write these?– No. Credit to Hampton Catlin, Nathan Weizenbaum, Chris Eppstein, and others.

• How can I learn more?– haml-lang.com, sass-lang.com,compass-style.org

• Why did Mark Hamill let himself go?– The 80s were hard on all of us.

Thanks!

Jeremy WeiskottenBlueleaf

@doctorzaius

QuickTime™ and a decompressor

are needed to see this picture.