Haml and Sass Introduction

2,589 views

Published on

An introduction to the templating languages Haml and Sass. Given at my first milestone for my apprenticeship at Obtiva.

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

No Downloads
Views
Total views
2,589
On SlideShare
0
From Embeds
0
Number of Embeds
65
Actions
Shares
0
Downloads
20
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Haml and Sass Introduction

    1. 1. Haml and Sass An Introduction
    2. 2. What? • Templating languages • Haml generates html • Sass generates css • Can be used independently • They help front-end development suck less
    3. 3. Why? • Markup should be beautiful • Markup should be DRY • Markup should be well indented
    4. 4. Basics • White space defined structure • Self closing tags
    5. 5. Example <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd"> <html> <head> <title> Ethan’s Awesome Webpage </title> </head> </html !!! %html %head %title Ethan’s Awesome Webpage
    6. 6. Example <div class=”latin” id=”content”> lorem ipsum </div> %div.latin#content lorem ipsum .latin#content lorem ipsum
    7. 7. Example .posts <div class=”posts”> -@posts.count.each do |post| <% @posts.count.each do |post|%> %span.title= post.name <span class=”title”> %p= post.text <%= post.name %> </span> <p> <%= post.text %> </p> <% end %> </div>
    8. 8. Sass
    9. 9. Basics .content padding: 5px margin-right: auto margin-left: auto img border: 1px solid black
    10. 10. Nesting .h1 .h1 { font: font-weight: bold; weight: bold font-size: 1.2em; } size: 1.2em .h1 img { img margin: 5px; } margin: 5px
    11. 11. Variables !margin = 10px h1 { !padding = 5px padding: 5px; !green = DarkGreen margin: 10px; !blue = DarkBlue color: DarkGreen; } h1 h2 { padding = !padding padding: 5px; margin = !margin margin: 10px; color = !green color: DarkBlue; } h2 padding = !padding margin = !margin color = !blue
    12. 12. Mixins #data th { =table-scaffolding(!margin) text-align: center; th font-weight: bold; text-align: center } font-weight: bold #data td, #data th { td, th padding: 2px; padding: 2px margin: 10px; margin = !margin } #data +table-scaffolding(10px)
    13. 13. Cool projects using Haml/Sass • StaticMatic - Adds the joy of dynamic websites to static ones • DynamicMatic - Adds a Sinatra back-end to StaticMatic
    14. 14. Resources • haml-lang.com • sass-lang.com • html2haml / css2sass • Live rendering http://rendera.heroku.com/
    15. 15. Questions?
    16. 16. Thanks

    ×