Haml And Sass In 15 Minutes

  • 32,924 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
32,924
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
388
Comments
0
Likes
41

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Patrick Crowley the.railsi.st
  • 2. Haml & Sass in 15 minutes
  • 3. What are Haml and Sass?
  • 4. • Template languages
  • 5. •Template languages • Haml generates .html
  • 6. •Template languages • Haml generates .html • Sass generates .css
  • 7. •Template languages • Haml generates .html • Sass generates .css • You can use one or both
  • 8. Do I have to learn another markup language?
  • 9. Yes, you do. Get over it.
  • 10. “Haml is poetry.” Max Muermann
  • 11. The principles of Haml...
  • 12. • Markup should be beautiful
  • 13. •Markup should be beautiful • Markup should be DRY
  • 14. •Markup should be beautiful • Markup should be DRY • Markup should be indented
  • 15. •Markup should be beautiful • Markup should be DRY • Markup should be indented • Structure should be clear
  • 16. The Basics
  • 17. • White space active
  • 18. •White space active • Indentation = structure
  • 19. •White space active • Indentation = structure • Tags begin with %
  • 20. •White space active • Indentation = structure • Tags begin with % • Tags close themselves
  • 21. •White space active • Indentation = structure • Tags begin with % • Tags close themselves • Use hashes for attributes
  • 22. <h1>Haml is cool</h1>
  • 23. %h1 Haml is cool
  • 24. <h1>Haml is cool, Lisa</h1>
  • 25. <h1>Haml is cool, <%= @name %></h1>
  • 26. %h1 = quot;Haml is cool, #{@name}quot;
  • 27. <div id=quot;colorquot;>Red</h1>
  • 28. %div#color Red
  • 29. #color Red
  • 30. Loops
  • 31. <ul id=quot;friendsquot;> <% @friends.each do |friend| %> <li><%= friend.name %></li> <% end %> </ul>
  • 32. %ul#friends - @friends.each do |friend| %li= friend.name
  • 33. <ul id=quot;friendsquot;> <li>Ted</li> <li>Erin</li> <li>Gerry</li> </ul>
  • 34. Attributes
  • 35. ul#friends - @friends.each do |friend| %li= friend.name
  • 36. ul{:id => quot;friendsquot;, :class => quot;listquot;} - @friends.each do |friend| %li= friend.name
  • 37. <ul id=quot;friendsquot; class=quot;listquot;> <li>Ted</li> <li>Erin</li> <li>Gerry</li> </ul>
  • 38. Forms
  • 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. 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. Layouts
  • 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. !!! 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. Sass
  • 45. Basic syntax
  • 46. #box { border: 0; color: black; }
  • 47. #box border: 0 color: black
  • 48. #box :border 0 :color black
  • 49. Nesting
  • 50. #box :border 0 :color black .orange :border 1px orange
  • 51. #box { border: 0; color: black; } #box .orange { border: 1px orange; }
  • 52. Variables
  • 53. !pink = #f3f #box :border 0 :color black .pink :border = !pink
  • 54. #box { border: 0; color: black; } #box .pink { color: #f3f; }
  • 55. Comments
  • 56. /* Homepage box #box :border 0 :color black
  • 57. Now go play!
  • 58. script/plugin install http://svn.hamptoncatlin.com/haml/tags/stable
  • 59. Helpful hints
  • 60. • Grab the TextMate bundles
  • 61. • Grab the TextMate bundles • Start a template at a time
  • 62. • Grab the TextMate bundles • Start a template at a time • Use .haml or .html.haml
  • 63. • Grab the TextMate bundles • Start a template at a time • Use .haml or .html.haml • Use .sass
  • 64. • Grab the TextMate bundles • Start a template at a time • Use .haml or .html.haml • Use .sass • Screw up? Check whitespace
  • 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. Have fun!
  • 67. The End