![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 end end](https://image.slidesharecdn.com/sanity-100915101135-phpapp02/85/Haml-Sass-and-Compass-for-Sane-Web-Development-21-320.jpg)
Haml, Sass and Compass for Sane Web Development
- 1. Haml, Sass and Compass for Sane Web Development Jeremy Weiskotten @doctorzaius
- 3. Haml
- 6. Mark Hamill may not be beautiful, but…
- 7. “ Markup should be beautiful.” http://haml-lang.com
- 8. Is this beautiful?
- 9. No.
- 14. HTML Tags %p My paragraph. %span= @user.first_name %ul %li Item 1 %li Item 2
- 15. Tags with IDs and Classes %p#summary %span.hint %p#summary.magnificent.bastard
- 16. Tags with Attributes %img{:src => ‘images/tree.jpg’, :alt => ‘My favorite tree’} Produces… <img src=“images/tree.jpg alt=“My favorite tree” />
- 17. Tags with Attributes %a.new{:href => new_thing_path} Click me! Produces… <a class=“new” href=“/things/new”>Click me!</a>
- 18. Tags with HTML 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>
- 19. Attributes, HTML-style %img(src=‘images/tree.jpg’ alt=‘My favorite tree’) %a.new(href=new_thing_path) Click me
- 20. Attribute helpers %body{ body_attributes } def body_attributes { :id => controller.controller_name, :class => controller.action_name } end
- 21. 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 end end
- 22. 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’
- 23. Not.
- 24. 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/
- 25. 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}!
- 26. JavaScript Filter :javascript var annoyingMsg = ‘Welcome, #{current_user.first_name}!’; $(function() { $(‘#welcome’).html(annoyingMsg); });
- 27. So why do I like Haml?
- 28. So why do I like Haml? Clean, well-structured source Easy to write, read & maintain
- 29. 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
- 30. 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
- 31. gem install haml
- 32. Sass
- 33. CSS that doesn’t suck (as much)
- 34. Sass is a big deal.
- 35. Typical CSS
- 37. Parent Selector a { text-decoration: none; &:hover { text-decoration: underline; } }
- 38. Typical CSS
- 39. Sass Mixin
- 40. Variables $highlight-color : #ff0; span.highlight { background-color: $highlight-color ; }
- 41. OMG COLOR MATH! $highlight-color: #ff0; span.highlight { background-color: $highlight-color; color: darken ($highlight-color, 70%); }
- 42. Other Kinds of Functions Color saturation, hue Opacity Math (round, ceil, floor, abs) Units Extensible: Add your own
- 43. What does it mean? CSS programmability Composition Reuse Organization Better separation of presentation from structure and content
- 44. A few more things... @import @extend @if / @else @for, @while
- 46. Compass
- 47. It’s a framework … for frameworks Built on Sass Easy integration with Rails, Rack, Ramaze, Sinatra, … Fresh, minty breath
- 48. Lots of toys!
- 49. With the Having of Many Useful Mixins Border radius Box shadow Float clearing (without markup) Image replacement
- 50. I don’t even know what most of these things are Resets CSS3 transitions Sticky footer Table striping And lots more!
- 51. Grid Systems Without Class-plosion Blueprint 960.gs Susy YUI etc
- 52. Fancy Buttons
- 53. Lemonade .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; }
- 54. 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.
- 55. Thanks! Jeremy Weiskotten Blueleaf @doctorzaius
Editor's Notes
- #14: Note: 2 space indentation