Haml And Sass In 15 Minutes

38,282 views
38,161 views

Published on

Published in: Technology
0 Comments
45 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
38,282
On SlideShare
0
From Embeds
0
Number of Embeds
3,263
Actions
Shares
0
Downloads
421
Comments
0
Likes
45
Embeds 0
No embeds

No notes for slide

Haml And Sass In 15 Minutes

  1. 1. Patrick Crowley the.railsi.st
  2. 2. Haml & Sass in 15 minutes
  3. 3. What are Haml and Sass?
  4. 4. • Template languages
  5. 5. •Template languages • Haml generates .html
  6. 6. •Template languages • Haml generates .html • Sass generates .css
  7. 7. •Template languages • Haml generates .html • Sass generates .css • You can use one or both
  8. 8. Do I have to learn another markup language?
  9. 9. Yes, you do. Get over it.
  10. 10. “Haml is poetry.” Max Muermann
  11. 11. The principles of Haml...
  12. 12. • Markup should be beautiful
  13. 13. •Markup should be beautiful • Markup should be DRY
  14. 14. •Markup should be beautiful • Markup should be DRY • Markup should be indented
  15. 15. •Markup should be beautiful • Markup should be DRY • Markup should be indented • Structure should be clear
  16. 16. The Basics
  17. 17. • White space active
  18. 18. •White space active • Indentation = structure
  19. 19. •White space active • Indentation = structure • Tags begin with %
  20. 20. •White space active • Indentation = structure • Tags begin with % • Tags close themselves
  21. 21. •White space active • Indentation = structure • Tags begin with % • Tags close themselves • Use hashes for attributes
  22. 22. <h1>Haml is cool</h1>
  23. 23. %h1 Haml is cool
  24. 24. <h1>Haml is cool, Lisa</h1>
  25. 25. <h1>Haml is cool, <%= @name %></h1>
  26. 26. %h1 = quot;Haml is cool, #{@name}quot;
  27. 27. <div id=quot;colorquot;>Red</h1>
  28. 28. %div#color Red
  29. 29. #color Red
  30. 30. Loops
  31. 31. <ul id=quot;friendsquot;> <% @friends.each do |friend| %> <li><%= friend.name %></li> <% end %> </ul>
  32. 32. %ul#friends - @friends.each do |friend| %li= friend.name
  33. 33. <ul id=quot;friendsquot;> <li>Ted</li> <li>Erin</li> <li>Gerry</li> </ul>
  34. 34. Attributes
  35. 35. ul#friends - @friends.each do |friend| %li= friend.name
  36. 36. ul{:id => quot;friendsquot;, :class => quot;listquot;} - @friends.each do |friend| %li= friend.name
  37. 37. <ul id=quot;friendsquot; class=quot;listquot;> <li>Ted</li> <li>Erin</li> <li>Gerry</li> </ul>
  38. 38. Forms
  39. 39. <% if logged_in? -%> <% form_for :comment, :url => blog_comments_path(@post) do |f| %> <label for=quot;comment_commentquot;>Post a comment:</label> <%= f.text_area :comment, :rows => 14, :cols => 40 %> <%= submit_tag quot;Add commentquot; %> <% end -%> <% else -%> <%= link_to quot;Loginquot;, :action => quot;loginquot; %> <% end -%>
  40. 40. if logged_in? - form_for :comment, :url => blog_comments_path(@post) do |f| %label{:for => quot;comment_commentquot;} Post a comment: = f.text_area :comment, :rows => 14, :cols => 40 = submit_tag quot;Add commentquot; - else = link_to quot;Loginquot;, :action => quot;loginquot;
  41. 41. Layouts
  42. 42. <head><!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot; lang=quot;enquot;> <head> <meta http-equiv=quot;content-typequot; content=quot;text/html;charset=UTF-8quot; /> <%= title :site => quot;Graffletopiaquot;, :separator => quot;-quot; %> <%= stylesheets %> <%= javascript_include_tag :defaults %> </head> <body> <% if logged_in? %> <p>You are logged in.</p> <% end %> <% if flash[:notice] != nil -%> <p><%= flash[:notice] %></p> <% end -%> <%= yield %> </body> </html>
  43. 43. !!! Strict %html{html_attrs} %head = title :site => quot;Graffletopiaquot;, :separator => quot;-quot; %meta{:http-equiv => quot;Content-typequot;, :content => quot;text/html;charset=UTF-8quot;} = stylesheets = javascript_include_tag :defaults %body - if logged_in? %p You are logged in. - if flash[:notice] != nil %p= flash[:notice] = yield
  44. 44. Sass
  45. 45. Basic syntax
  46. 46. #box { border: 0; color: black; }
  47. 47. #box border: 0 color: black
  48. 48. #box :border 0 :color black
  49. 49. Nesting
  50. 50. #box :border 0 :color black .orange :border 1px orange
  51. 51. #box { border: 0; color: black; } #box .orange { border: 1px orange; }
  52. 52. Variables
  53. 53. !pink = #f3f #box :border 0 :color black .pink :border = !pink
  54. 54. #box { border: 0; color: black; } #box .pink { color: #f3f; }
  55. 55. Comments
  56. 56. /* Homepage box #box :border 0 :color black
  57. 57. Now go play!
  58. 58. script/plugin install http://svn.hamptoncatlin.com/haml/tags/stable
  59. 59. Helpful hints
  60. 60. • Grab the TextMate bundles
  61. 61. • Grab the TextMate bundles • Start a template at a time
  62. 62. • Grab the TextMate bundles • Start a template at a time • Use .haml or .html.haml
  63. 63. • Grab the TextMate bundles • Start a template at a time • Use .haml or .html.haml • Use .sass
  64. 64. • Grab the TextMate bundles • Start a template at a time • Use .haml or .html.haml • Use .sass • Screw up? Check whitespace
  65. 65. • Grab the TextMate bundles • Start a template at a time • Use .haml or .html.haml • Use .sass • Screw up? Check whitespace • Move logic to helpers
  66. 66. Have fun!
  67. 67. The End

×