Haml, Sass and Compass for Sane Web Development

6,101 views

Published on

HTML and CSS are ubiquitous on the web, but they were mostly created
in a vacuum. Haml, Sass, and Compass provide helpful abstractions and
utilities to remove some of the repetition and noise in your code for
more rapid development and easier maintenance.

This talk was given at the Boston Ruby Group on September 14, 2010.

Published in: Technology
1 Comment
8 Likes
Statistics
Notes
  • Sorry about the images that didn't convert. I'll try to fix and re-upload.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
6,101
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
48
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide
  • Note: 2 space indentation
  • Haml, Sass and Compass for Sane Web Development

    1. 1. Haml, Sass and Compass for Sane Web Development Jeremy Weiskotten @doctorzaius
    2. 2. (We’re hiring.)
    3. 3. Haml
    4. 6. Mark Hamill may not be beautiful, but…
    5. 7. <ul><li>“ Markup should be beautiful.” </li></ul><ul><li>http://haml-lang.com </li></ul>
    6. 8. Is this beautiful?
    7. 9. No.
    8. 14. HTML Tags <ul><li>%p </li></ul><ul><li>My paragraph. </li></ul><ul><li>%span= @user.first_name </li></ul><ul><li>%ul </li></ul><ul><li>%li Item 1 </li></ul><ul><li>%li Item 2 </li></ul>
    9. 15. Tags with IDs and Classes <ul><li>%p#summary </li></ul><ul><li>%span.hint </li></ul><ul><li>%p#summary.magnificent.bastard </li></ul>
    10. 16. Tags with Attributes <ul><li>%img{:src => ‘images/tree.jpg’, :alt => ‘My favorite tree’} </li></ul><ul><li>Produces… </li></ul><ul><li><img src=“images/tree.jpg alt=“My favorite tree” /> </li></ul>
    11. 17. Tags with Attributes <ul><li>%a.new{:href => new_thing_path} </li></ul><ul><li>Click me! </li></ul><ul><li>Produces… </li></ul><ul><li><a class=“new” href=“/things/new”>Click me!</a> </li></ul>
    12. 18. Tags with HTML 5 Data Attributes <ul><li>%ul.todo </li></ul><ul><li>%li{:data => { :priority => 1, :cost => 0 }} </li></ul><ul><li>Kick ass </li></ul><ul><li>%li{:data => { :priority => 2, :cost => 1 }} </li></ul><ul><li>Chew bubble gum </li></ul><ul><li><ul class=“todo”> </li></ul><ul><li><li data-priority=“1” data-cost=“0”>Kick ass</li> </li></ul><ul><li><li data-priority=“2” data-cost=“1”>Chew bubble gum</li> </li></ul><ul><li></ul> </li></ul>
    13. 19. Attributes, HTML-style <ul><li>%img(src=‘images/tree.jpg’ alt=‘My favorite tree’) </li></ul><ul><li>%a.new(href=new_thing_path) Click me </li></ul>
    14. 20. Attribute helpers <ul><li>%body{ body_attributes } </li></ul><ul><li>def body_attributes </li></ul><ul><li>{ </li></ul><ul><li>:id => controller.controller_name, </li></ul><ul><li>:class => controller.action_name </li></ul><ul><li>} </li></ul><ul><li>end </li></ul>
    15. 21. Attribute helpers <ul><li>%li{ user_li_attributes (person) } </li></ul><ul><li>def user_li_attributes (user) </li></ul><ul><li>{}.tap do |attr| </li></ul><ul><li>attr[:id] = dom_id(user) </li></ul><ul><li>attr[:class] = ‘active’ if user == current_user </li></ul><ul><li>end </li></ul><ul><li>end </li></ul>
    16. 22. Flow & Output <ul><li>- if signed_in? </li></ul><ul><li>= current_user.first_name </li></ul><ul><li>- else </li></ul><ul><li>= link_to ‘Sign in’, sign_in_path </li></ul><ul><li>content_for :head do </li></ul><ul><li>= javascript_include_tag ‘foo’ </li></ul>
    17. 23. Not.
    18. 24. Haml Sucks for Content * <ul><li>Whitespace pain, particularly around punctuation </li></ul><ul><li>Content is not structure </li></ul><ul><li>Use a filter for inline content markup </li></ul>* See http://chriseppstein.github.com/blog/2010/02/08/haml-sucks-for-content/
    19. 25. Content Filters <ul><li>:textile, :markdown, :maruku, etc. </li></ul><ul><li>.summary </li></ul><ul><li>:textile </li></ul><ul><li>h1. Welcome, #{current_user.name}. </li></ul><ul><li>If you’re not, *#{current_user.name}*, </li></ul><ul><li>“ sign out”:#{sign_out_path}! </li></ul>
    20. 26. JavaScript Filter <ul><li>:javascript </li></ul><ul><li>var annoyingMsg = ‘Welcome, </li></ul><ul><li>#{current_user.first_name}!’; </li></ul><ul><li>$(function() { </li></ul><ul><li>$(‘#welcome’).html(annoyingMsg); </li></ul><ul><li>}); </li></ul>
    21. 27. So why do I like Haml?
    22. 28. So why do I like Haml? <ul><li>Clean, well-structured source </li></ul><ul><ul><li>Easy to write, read & maintain </li></ul></ul>
    23. 29. So why do I like Haml? <ul><li>Clean, well-structured source </li></ul><ul><ul><li>Easy to write, read & maintain </li></ul></ul><ul><li>Encourages good practices </li></ul><ul><ul><li>Minimal code in the view </li></ul></ul><ul><ul><li>Extract helpers, partials </li></ul></ul>
    24. 30. So why do I like Haml? <ul><li>Clean, well-structured source </li></ul><ul><ul><li>Easy to write, read & maintain </li></ul></ul><ul><li>Encourages good practices </li></ul><ul><ul><li>Minimal code in the view </li></ul></ul><ul><ul><li>Extract helpers, partials </li></ul></ul><ul><li>Better mental mapping to CSS </li></ul>
    25. 31. <ul><li>gem install haml </li></ul>
    26. 32. Sass
    27. 33. <ul><li>CSS that doesn’t suck (as much) </li></ul>
    28. 34. Sass is a big deal.
    29. 35. Typical CSS
    30. 36. Sass Nested Rules
    31. 37. Parent Selector <ul><li>a { </li></ul><ul><li>text-decoration: none; </li></ul><ul><li>&:hover { </li></ul><ul><li>text-decoration: underline; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
    32. 38. Typical CSS
    33. 39. Sass Mixin
    34. 40. Variables <ul><li>$highlight-color : #ff0; </li></ul><ul><li>span.highlight { </li></ul><ul><li>background-color: $highlight-color ; </li></ul><ul><li>} </li></ul>
    35. 41. OMG COLOR MATH! <ul><li>$highlight-color: #ff0; </li></ul><ul><li>span.highlight { </li></ul><ul><li>background-color: $highlight-color; </li></ul><ul><li>color: darken ($highlight-color, 70%); </li></ul><ul><li>} </li></ul>
    36. 42. Other Kinds of Functions <ul><li>Color saturation, hue </li></ul><ul><li>Opacity </li></ul><ul><li>Math (round, ceil, floor, abs) </li></ul><ul><li>Units </li></ul><ul><li>Extensible: Add your own </li></ul>
    37. 43. What does it mean? <ul><li>CSS programmability </li></ul><ul><li>Composition </li></ul><ul><li>Reuse </li></ul><ul><li>Organization </li></ul><ul><li>Better separation of presentation from structure and content </li></ul>
    38. 44. A few more things... <ul><li>@import </li></ul><ul><li>@extend </li></ul><ul><li>@if / @else </li></ul><ul><li>@for, @while </li></ul>
    39. 45. <ul><li>http://sass-lang.com </li></ul>
    40. 46. Compass
    41. 47. It’s a framework <ul><li>… for frameworks </li></ul><ul><li>Built on Sass </li></ul><ul><li>Easy integration with Rails, Rack, Ramaze, Sinatra, … </li></ul><ul><li>Fresh, minty breath </li></ul>
    42. 48. Lots of toys!
    43. 49. With the Having of Many Useful Mixins <ul><li>Border radius </li></ul><ul><li>Box shadow </li></ul><ul><li>Float clearing (without markup) </li></ul><ul><li>Image replacement </li></ul>
    44. 50. I don’t even know what most of these things are <ul><li>Resets </li></ul><ul><li>CSS3 transitions </li></ul><ul><li>Sticky footer </li></ul><ul><li>Table striping </li></ul><ul><li>And lots more! </li></ul>
    45. 51. Grid Systems <ul><li>Without Class-plosion </li></ul><ul><li>Blueprint </li></ul><ul><li>960.gs </li></ul><ul><li>Susy </li></ul><ul><li>YUI </li></ul><ul><li>etc </li></ul>
    46. 52. Fancy Buttons
    47. 53. Lemonade .logo { background: sprite-image(&quot;lemonade/lemonade-logo.png&quot;); } .lime { background: sprite-image(&quot;lemonade/lime.png&quot;); } .coffee { background: sprite-image(&quot;other-drinks/coffee.png&quot;) no-repeat; }
    48. 54. Questions? <ul><li>Did you write these? </li></ul><ul><ul><li>No. Credit to Hampton Catlin, Nathan Weizenbaum, Chris Eppstein, and others. </li></ul></ul><ul><li>How can I learn more? </li></ul><ul><ul><li>haml-lang.com, sass-lang.com, compass-style.org </li></ul></ul><ul><li>Why did Mark Hamill let himself go? </li></ul><ul><ul><li>The 80s were hard on all of us. </li></ul></ul>
    49. 55. Thanks! <ul><li>Jeremy Weiskotten </li></ul><ul><li>Blueleaf </li></ul><ul><li>@doctorzaius </li></ul>

    ×