Haml & Sass (SCSS)

by Krzysztof Jablonski

ERb (Embedded Ruby)

ERb is the default template language included with Rails.It is very similar to PHP, JSP and ASP.

ERb (Embedded Ruby)

ERb is the default template language included with Rails.It is very similar to PHP, JSP and ASP.

ERb (Embedded Ruby)

ERb is the default template language included with Rails.It is very similar to PHP, JSP and ASP.

ERb (Embedded Ruby)

<%= %>will render the result returned from the embedded Ruby expression as text

ERb (Embedded Ruby)

<%= %>will render the result returned from the embedded Ruby expression as text

<% %> will execute the embedded expression without rendering the result

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

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

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

Haml

Haml is based on one primary principle. Markup should be beautiful.

Haml

Haml is based on one primary principle. Markup should be beautiful.

index.html.haml

Haml

Haml is based on one primary principle. Markup should be beautiful.

index.html.haml

index.html.erb

Haml examples

Haml examples

Haml examples

Haml examples

Haml 3.0

Easier Multiline Ruby Functions

Haml 3.0

Custom Data Attributes

CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets)

Netguru rules:

CSS (Cascading Style Sheets)

Netguru rules:one style sheet for all browsers

CSS (Cascading Style Sheets)

Netguru rules:one style sheet for all browsersIE6 support

CSS (Cascading Style Sheets)

Netguru rules:one style sheet for all browsersIE6 supportrounded corners (CSS)

CSS (Cascading Style Sheets)

Netguru rules:one style sheet for all browsersIE6 supportrounded corners (CSS)only PNG without PNGfix

Sass 

Sass is an extension of CSS3, adding:nested rules,variables,mixins,selector inheritance,and more.

Sass

 

Sass

 

Sass

 

Sass

 

Sass vs SCSS (Sassy CSS)

SCSS SASS

Sass 3

variables with the $ prefix instead of ! (bang)

Sass 3

variables with the $ prefix instead of ! (bang)mixins are declared with @mixin and included with @include

Sass 3

variables with the $ prefix instead of ! (bang)mixins are declared with @mixin and included with @includecolor functions (lighten, darken, etc.)

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) 

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

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

Sites

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