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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Haml And Sass In 15 Minutes

34,083

Published on

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

No Downloads
Views
Total Views
34,083
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
398
Comments
0
Likes
42
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

×