haml & sass
DESCRIPTION
TRANSCRIPT
![Page 1: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/1.jpg)
Haml & Sass (SCSS)
by Krzysztof Jablonski
![Page 2: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/2.jpg)
ERb (Embedded Ruby)
ERb is the default template language included with Rails.It is very similar to PHP, JSP and ASP.
![Page 3: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/3.jpg)
ERb (Embedded Ruby)
ERb is the default template language included with Rails.It is very similar to PHP, JSP and ASP.
![Page 4: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/4.jpg)
ERb (Embedded Ruby)
ERb is the default template language included with Rails.It is very similar to PHP, JSP and ASP.
![Page 5: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/5.jpg)
ERb (Embedded Ruby)
<%= %>will render the result returned from the embedded Ruby expression as text
![Page 6: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/6.jpg)
ERb (Embedded Ruby)
<%= %>will render the result returned from the embedded Ruby expression as text
<% %> will execute the embedded expression without rendering the result
![Page 7: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/7.jpg)
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
![Page 8: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/8.jpg)
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
![Page 9: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/9.jpg)
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
![Page 10: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/10.jpg)
Haml
Haml is based on one primary principle. Markup should be beautiful.
![Page 11: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/11.jpg)
Haml
Haml is based on one primary principle. Markup should be beautiful.
index.html.haml
![Page 12: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/12.jpg)
Haml
Haml is based on one primary principle. Markup should be beautiful.
index.html.haml
index.html.erb
![Page 13: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/13.jpg)
Haml examples
![Page 14: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/14.jpg)
Haml examples
![Page 15: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/15.jpg)
Haml examples
![Page 16: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/16.jpg)
Haml examples
![Page 17: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/17.jpg)
Haml 3.0
Easier Multiline Ruby Functions
![Page 18: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/18.jpg)
Haml 3.0
Custom Data Attributes
![Page 19: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/19.jpg)
CSS (Cascading Style Sheets)
![Page 20: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/20.jpg)
CSS (Cascading Style Sheets)
Netguru rules:
![Page 21: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/21.jpg)
CSS (Cascading Style Sheets)
Netguru rules:one style sheet for all browsers
![Page 22: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/22.jpg)
CSS (Cascading Style Sheets)
Netguru rules:one style sheet for all browsersIE6 support
![Page 23: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/23.jpg)
CSS (Cascading Style Sheets)
Netguru rules:one style sheet for all browsersIE6 supportrounded corners (CSS)
![Page 24: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/24.jpg)
CSS (Cascading Style Sheets)
Netguru rules:one style sheet for all browsersIE6 supportrounded corners (CSS)only PNG without PNGfix
![Page 25: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/25.jpg)
Sass
Sass is an extension of CSS3, adding:nested rules,variables,mixins,selector inheritance,and more.
![Page 26: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/26.jpg)
Sass
![Page 27: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/27.jpg)
Sass
![Page 28: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/28.jpg)
Sass
![Page 29: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/29.jpg)
Sass
![Page 30: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/30.jpg)
Sass vs SCSS (Sassy CSS)
SCSS SASS
![Page 31: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/31.jpg)
Sass 3
variables with the $ prefix instead of ! (bang)
![Page 32: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/32.jpg)
Sass 3
variables with the $ prefix instead of ! (bang)mixins are declared with @mixin and included with @include
![Page 33: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/33.jpg)
Sass 3
variables with the $ prefix instead of ! (bang)mixins are declared with @mixin and included with @includecolor functions (lighten, darken, etc.)
![Page 34: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/34.jpg)
Sass 3
variables with the $ prefix instead of ! (bang)mixins are declared with @mixin and included with @includecolor functions (lighten, darken, etc.)selector inheritance (@extend)
![Page 35: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/35.jpg)
Sass 3
variables with the $ prefix instead of ! (bang)mixins are declared with @mixin and included with @includecolor functions (lighten, darken, etc.)selector inheritance (@extend) = is no longer necessary for declaring properties with variable values
![Page 36: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/36.jpg)
Sass 3
variables with the $ prefix instead of ! (bang)mixins are declared with @mixin and included with @includecolor functions (lighten, darken, etc.)selector inheritance (@extend) = is no longer necessary for declaring properties with variable valuesstrings without quotes were deprecated
![Page 37: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/37.jpg)
![Page 38: Haml & sass](https://reader034.vdocuments.site/reader034/viewer/2022050720/54b5027d4a7959cc7c8b4734/html5/thumbnails/38.jpg)
Sites
http://haml-lang.com/http://sass-lang.com/http://nex-3.com/