Your SlideShare is downloading. ×
  • Like
Haml And Sass In 15 Minutes
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Haml And Sass In 15 Minutes

  • 33,231 views
Published

 

Published 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
33,231
On SlideShare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
392
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