Haml and Sass Introduction
1 like973 views
The document introduces HAML and SASS as templating languages that improve front-end development by generating HTML and CSS, respectively. It highlights key features, including whitespace-defined structure, self-closing tags for HAML, and nesting, variables, and mixins for SASS. Additionally, it lists resources and projects utilizing HAML and SASS to enhance static websites with dynamic capabilities.
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