Patrick Crowley
  the.railsi.st
Haml & Sass
in 15 minutes
What are Haml and Sass?
•   Template languages
•Template languages

• Haml generates .html
•Template languages

• Haml generates .html
• Sass generates .css
•Template languages

• Haml generates .html
• Sass generates .css

• You can use one or both
Do I have to learn another
   markup language?
Yes, you do. Get over it.
“Haml is poetry.”
       Max Muermann
The principles of Haml...
•   Markup should be beautiful
•Markup should be beautiful

• Markup should be DRY
•Markup should be beautiful

• Markup should be DRY
• Markup should be indented
•Markup should be beautiful

• Markup should be DRY
• Markup should be indented

• Structure should be clear
The Basics
•   White space active
•White space active

• Indentation = structure
•White space active

• Indentation = structure
• Tags begin with %
•White space active

• Indentation = structure
• Tags begin with %

• Tags close themselves
•White space active

• Indentation = structure
• Tags begin with %

• Tags close themselves
• Use hashes for attributes
<h1>Haml is cool</h1>
%h1 Haml is cool
<h1>Haml is cool, Lisa</h1>
<h1>Haml is cool,
<%= @name %></h1>
%h1 = quot;Haml is cool, #{@name}quot;
<div id=quot;colorquot;>Red</h1>
%div#color Red
#color Red
Loops
<ul id=quot;friendsquot;>
<% @friends.each do |friend| %>
<li><%= friend.name %></li>
<% end %>
</ul>
%ul#friends
- @friends.each do |friend|
	 %li= friend.name
<ul id=quot;friendsquot;>
 <li>Ted</li>
 <li>Erin</li>
 <li>Gerry</li>
</ul>
Attributes
ul#friends
- @friends.each do |friend|
	 %li= friend.name
ul{:id => quot;friendsquot;, :class => quot;listquot;}
- @friends.each do |friend|
	 %li= friend.name
<ul id=quot;friendsquot; class=quot;listquot;>
 <li>Ted</li>
 <li>Erin</li>
 <li>Gerry</li>
</ul>
Forms
<% if logged_in? -%>


 <% form_for :comment, :url => blog_comments_path(@post) do |f| %>


 <label for=quot;comment_comme...
if logged_in?
  - form_for :comment, :url => blog_comments_path(@post) do |f|

    %label{:for => quot;comment_commentquot...
Layouts
<head><!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot;
  quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-stric...
!!! Strict
%html{html_attrs}
  %head
    = title :site => quot;Graffletopiaquot;, :separator => quot;-quot;
    %meta{:htt...
Sass
Basic syntax
#box {
  border: 0;
	 color: black;
  }
#box
  border: 0
	 color: black
#box
  :border 0
	 :color black
Nesting
#box
  :border 0
	 :color black
	 .orange
	 :border 1px orange
#box {
  border: 0;
	 color: black;
  }

#box .orange {
	 border: 1px orange;
  }
Variables
!pink = #f3f
#box
  :border 0
	 :color black
	 .pink
	 :border = !pink
#box {
  border: 0;
	 color: black;
  }

#box .pink {
	 color: #f3f;
  }
Comments
/* Homepage box
#box
  :border 0
	 :color black
Now go play!
script/plugin install
http://svn.hamptoncatlin.com/haml/tags/stable
Helpful hints
• Grab the TextMate bundles
• Grab the TextMate bundles
• Start a template at a time
• Grab the TextMate bundles
• Start a template at a time

• Use .haml or .html.haml
• Grab the TextMate bundles
• Start a template at a time

• Use .haml or .html.haml
• Use .sass
• Grab the TextMate bundles
• Start a template at a time

• Use .haml or .html.haml
• Use .sass

• Screw up? Check whitespace
• Grab the TextMate bundles
• Start a template at a time

• Use .haml or .html.haml
• Use .sass

• Screw up? Check whitesp...
Have fun!
The End
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
×

Haml And Sass In 15 Minutes

34,899

Published on

Published in: Technology

Haml And Sass In 15 Minutes

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

    Clipping is a handy way to collect important slides you want to go back to later.

×