Haml And Sass In 15 Minutes
•
48 likes•18,628 views
The document discusses Haml and Sass, which are template languages used to generate HTML and CSS respectively. Haml uses indentation and special characters to structure markup concisely while Sass allows nesting, variables, and other features to simplify CSS authoring. The document provides examples of basic Haml and Sass syntax and recommends starting with individual templates, using the proper file extensions, and checking whitespace when errors occur.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Haml And Sass In 15 Minutes
Similar to Haml And Sass In 15 Minutes (20)
More from Patrick Crowley
Recently uploaded
Recently uploaded (20)
Haml And Sass In 15 Minutes
- 1. Patrick Crowley the.railsi.st
- 2. Haml & Sass in 15 minutes
- 3. What are Haml and Sass?
- 5. • Template languages
- 6. •Template languages • Haml generates .html
- 7. •Template languages • Haml generates .html • Sass generates .css
- 8. •Template languages • Haml generates .html • Sass generates .css • You can use one or both
- 9. Do I have to learn another markup language?
- 10. Yes, you do. Get over it.
- 11. “Haml is poetry.” Max Muermann
- 12. The principles of Haml...
- 14. • Markup should be beautiful
- 15. •Markup should be beautiful • Markup should be DRY
- 16. •Markup should be beautiful • Markup should be DRY • Markup should be indented
- 17. •Markup should be beautiful • Markup should be DRY • Markup should be indented • Structure should be clear
- 18. The Basics
- 20. • White space active
- 21. •White space active • Indentation = structure
- 22. •White space active • Indentation = structure • Tags begin with %
- 23. •White space active • Indentation = structure • Tags begin with % • Tags close themselves
- 24. •White space active • Indentation = structure • Tags begin with % • Tags close themselves • Use hashes for attributes
- 26. %h1 Haml is cool
- 27. <h1>Haml is cool, Lisa</h1>
- 28. <h1>Haml is cool, <%= @name %></h1>
- 29. %h1 = quot;Haml is cool, #{@name}quot;
- 31. %div#color Red
- 32. #color Red
- 33. Loops
- 34. <ul id=quot;friendsquot;> <% @friends.each do |friend| %> <li><%= friend.name %></li> <% end %> </ul>
- 35. %ul#friends - @friends.each do |friend| %li= friend.name
- 36. <ul id=quot;friendsquot;> <li>Ted</li> <li>Erin</li> <li>Gerry</li> </ul>
- 37. Attributes
- 38. ul#friends - @friends.each do |friend| %li= friend.name
- 39. ul{:id => quot;friendsquot;, :class => quot;listquot;} - @friends.each do |friend| %li= friend.name
- 40. <ul id=quot;friendsquot; class=quot;listquot;> <li>Ted</li> <li>Erin</li> <li>Gerry</li> </ul>
- 41. Forms
- 42. <% 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 -%>
- 43. 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;
- 44. Layouts
- 45. <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>
- 46. !!! 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
- 47. Sass
- 48. Basic syntax
- 49. #box { border: 0; color: black; }
- 50. #box border: 0 color: black
- 51. #box :border 0 :color black
- 52. Nesting
- 53. #box :border 0 :color black .orange :border 1px orange
- 54. #box { border: 0; color: black; } #box .orange { border: 1px orange; }
- 55. Variables
- 56. !pink = #f3f #box :border 0 :color black .pink :border = !pink
- 57. #box { border: 0; color: black; } #box .pink { color: #f3f; }
- 58. Comments
- 59. /* Homepage box #box :border 0 :color black
- 60. Now go play!
- 62. Helpful hints
- 64. • Grab the TextMate bundles
- 65. • Grab the TextMate bundles • Start a template at a time
- 66. • Grab the TextMate bundles • Start a template at a time • Use .haml or .html.haml
- 67. • Grab the TextMate bundles • Start a template at a time • Use .haml or .html.haml • Use .sass
- 68. • Grab the TextMate bundles • Start a template at a time • Use .haml or .html.haml • Use .sass • Screw up? Check whitespace
- 69. • 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
- 70. Have fun!
- 71. The End