• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Haml And Sass In 15 Minutes
 

Haml And Sass In 15 Minutes

on

  • 39,442 views

 

Statistics

Views

Total Views
39,442
Views on SlideShare
37,857
Embed Views
1,585

Actions

Likes
40
Downloads
374
Comments
0

8 Embeds 1,585

http://mobicon.tistory.com 1353
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
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

Haml And Sass In 15 Minutes Haml And Sass In 15 Minutes Presentation Transcript

  • 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_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 -%>
  • 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;
  • Layouts
  • <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>
  • !!! 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
  • 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 whitespace • Move logic to helpers
  • Have fun!
  • The End