Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Haml & sass

2,322 views

Published on

Published in: Technology, Education
  • Be the first to comment

Haml & sass

  1. 1. Haml & Sass (SCSS) by Krzysztof Jablonski
  2. 2. ERb (Embedded Ruby) ERb is the default template language included with Rails. It is very similar to PHP, JSP and ASP.
  3. 3. ERb (Embedded Ruby) ERb is the default template language included with Rails. It is very similar to PHP, JSP and ASP.
  4. 4. ERb (Embedded Ruby) ERb is the default template language included with Rails. It is very similar to PHP, JSP and ASP.
  5. 5. ERb (Embedded Ruby) <%= %> will render the result returned from the embedded Ruby expression as text
  6. 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. 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. 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. 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. 10. Haml Haml is based on one primary principle. Markup should be beautiful.
  11. 11. Haml Haml is based on one primary principle. Markup should be beautiful. index.html.haml
  12. 12. Haml Haml is based on one primary principle. Markup should be beautiful. index.html.haml index.html.erb
  13. 13. Haml examples
  14. 14. Haml examples
  15. 15. Haml examples
  16. 16. Haml examples
  17. 17. Haml 3.0 Easier Multiline Ruby Functions
  18. 18. Haml 3.0 Custom Data Attributes
  19. 19. CSS (Cascading Style Sheets)
  20. 20. CSS (Cascading Style Sheets) Netguru rules:
  21. 21. CSS (Cascading Style Sheets) Netguru rules: one style sheet for all browsers
  22. 22. CSS (Cascading Style Sheets) Netguru rules: one style sheet for all browsers IE6 support
  23. 23. CSS (Cascading Style Sheets) Netguru rules: one style sheet for all browsers IE6 support rounded corners (CSS)
  24. 24. CSS (Cascading Style Sheets) Netguru rules: one style sheet for all browsers IE6 support rounded corners (CSS) only PNG without PNGfix
  25. 25. Sass  Sass is an extension of CSS3, adding: nested rules, variables, mixins, selector inheritance, and more.
  26. 26. Sass  
  27. 27. Sass  
  28. 28. Sass  
  29. 29. Sass  
  30. 30. Sass vs SCSS (Sassy CSS) SCSS SASS
  31. 31. Sass 3 variables with the $ prefix instead of ! (bang)
  32. 32. Sass 3 variables with the $ prefix instead of ! (bang) mixins are declared with @mixin and included with @include
  33. 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. 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. 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. 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
  37. 37. Sites http://haml-lang.com/ http://sass-lang.com/ http://nex-3.com/

×