Your SlideShare is downloading. ×
0
Haml and Sass Introduction
Haml and Sass Introduction
Haml and Sass Introduction
Haml and Sass Introduction
Haml and Sass Introduction
Haml and Sass Introduction
Haml and Sass Introduction
Haml and Sass Introduction
Haml and Sass Introduction
Haml and Sass Introduction
Haml and Sass Introduction
Haml and Sass Introduction
Haml and Sass Introduction
Haml and Sass Introduction
Haml and Sass Introduction
Haml and Sass Introduction
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Haml and Sass Introduction

2,314

Published on

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

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,314
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
19
Comments
0
Likes
2
Embeds 0
No embeds

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. Haml and Sass An Introduction
    • 2. What? • Templating languages • Haml generates html • Sass generates css • Can be used independently • They help front-end development suck less
    • 3. Why? • Markup should be beautiful • Markup should be DRY • Markup should be well indented
    • 4. Basics • White space defined structure • Self closing tags
    • 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. Example <div class=”latin” id=”content”> lorem ipsum </div> %div.latin#content lorem ipsum .latin#content lorem ipsum
    • 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. Sass
    • 9. Basics .content padding: 5px margin-right: auto margin-left: auto img border: 1px solid black
    • 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. 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. 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. Cool projects using Haml/Sass • StaticMatic - Adds the joy of dynamic websites to static ones • DynamicMatic - Adds a Sinatra back-end to StaticMatic
    • 14. Resources • haml-lang.com • sass-lang.com • html2haml / css2sass • Live rendering http://rendera.heroku.com/
    • 15. Questions?
    • 16. Thanks

    ×