Haml, Sass and Compass for Sane Web Development Jeremy Weiskotten @doctorzaius
Jan 28, 2015
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.