Haml and Sass Introduction
•Download as KEY, PDF•
1 like•968 views
An introduction to the templating languages Haml and Sass. Given at my first milestone for my apprenticeship at Obtiva.
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Haml and Sass Introduction
Similar to Haml and Sass Introduction (20)
Recently uploaded
Recently uploaded (20)
Haml and Sass Introduction
- 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