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.

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

38. Sites
http://haml-lang.com/
http://sass-lang.com/
http://nex-3.com/