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

Like this? Share it with your network

Share
  • 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
40,678
On Slideshare
38,868
From Embeds
1,810
Number of Embeds
8

Actions

Shares
Downloads
384
Comments
0
Likes
41

Embeds 1,810

http://mobicon.tistory.com 1,578
http://www.slideshare.net 218
https://twitter.com 6
http://notes.research.neverender.org 3
http://webcache.googleusercontent.com 2
http://changingtimextoz.tumblr.com 1
http://translate.googleusercontent.com 1
http://www.slideee.com 1

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