Haml & sass
3 likes1,250 views
The document discusses ERb, Haml, Sass, and CSS. ERb is the default templating language for Ruby on Rails projects and allows embedding Ruby code and expressions. Haml is an alternative templating language that aims to make markup more beautiful. Sass is an extension of CSS that adds nested rules, variables, mixins and other features to make CSS more powerful. The document provides examples and comparisons of these templating and styling languages.
Haml & sass
- 1. Haml & Sass (SCSS) by Krzysztof Jablonski
- 2. ERb (Embedded Ruby) ERb is the default template language included with Rails. It is very similar to PHP, JSP and ASP.
- 3. ERb (Embedded Ruby) ERb is the default template language included with Rails. It is very similar to PHP, JSP and ASP.
- 4. ERb (Embedded Ruby) ERb is the default template language included with Rails. It is very similar to PHP, JSP and ASP.
- 5. ERb (Embedded Ruby) <%= %> will render the result returned from the embedded Ruby expression as text
- 6. ERb (Embedded Ruby) <%= %> will render the result returned from the embedded Ruby expression as text <% %> will execute the embedded expression without rendering the result
- 7. ERb (Embedded Ruby) <%= %> will render the result returned from the embedded Ruby expression as text <% %> will execute the embedded expression without rendering the result <% -%> will execute the embedded expression without rendering the result and will suppress trailing whitespace
- 8. ERb (Embedded Ruby) <%= %> will render the result returned from the embedded Ruby expression as text <% %> will execute the embedded expression without rendering the result <% -%> will execute the embedded expression without rendering the result and will suppress trailing whitespace <%- %> will execute the embedded expression without rendering the result and will suppress leading whitespace
- 9. ERb (Embedded Ruby) <%= %> will render the result returned from the embedded Ruby expression as text <% %> will execute the embedded expression without rendering the result <% -%> will execute the embedded expression without rendering the result and will suppress trailing whitespace <%- %> will execute the embedded expression without rendering the result and will suppress leading whitespace <%# %> will cause the embedded expression to be parsed as a comment
- 10. Haml Haml is based on one primary principle. Markup should be beautiful.
- 11. Haml Haml is based on one primary principle. Markup should be beautiful. index.html.haml
- 12. Haml Haml is based on one primary principle. Markup should be beautiful. index.html.haml index.html.erb
- 13. Haml examples
- 14. Haml examples
- 15. Haml examples
- 16. Haml examples
- 17. Haml 3.0 Easier Multiline Ruby Functions
- 18. Haml 3.0 Custom Data Attributes
- 19. CSS (Cascading Style Sheets)
- 20. CSS (Cascading Style Sheets) Netguru rules:
- 21. CSS (Cascading Style Sheets) Netguru rules: one style sheet for all browsers
- 22. CSS (Cascading Style Sheets) Netguru rules: one style sheet for all browsers IE6 support
- 23. CSS (Cascading Style Sheets) Netguru rules: one style sheet for all browsers IE6 support rounded corners (CSS)
- 24. CSS (Cascading Style Sheets) Netguru rules: one style sheet for all browsers IE6 support rounded corners (CSS) only PNG without PNGfix
- 25. Sass Sass is an extension of CSS3, adding: nested rules, variables, mixins, selector inheritance, and more.
- 26. Sass
- 27. Sass
- 28. Sass
- 29. Sass
- 30. Sass vs SCSS (Sassy CSS) SCSS SASS
- 31. Sass 3 variables with the $ prefix instead of ! (bang)
- 32. Sass 3 variables with the $ prefix instead of ! (bang) mixins are declared with @mixin and included with @include
- 33. Sass 3 variables with the $ prefix instead of ! (bang) mixins are declared with @mixin and included with @include color functions (lighten, darken, etc.)
- 34. Sass 3 variables with the $ prefix instead of ! (bang) mixins are declared with @mixin and included with @include color functions (lighten, darken, etc.) selector inheritance (@extend)
- 35. Sass 3 variables with the $ prefix instead of ! (bang) mixins are declared with @mixin and included with @include color functions (lighten, darken, etc.) selector inheritance (@extend) = is no longer necessary for declaring properties with variable values
- 36. Sass 3 variables with the $ prefix instead of ! (bang) mixins are declared with @mixin and included with @include color functions (lighten, darken, etc.) selector inheritance (@extend) = is no longer necessary for declaring properties with variable values strings without quotes were deprecated