CursoCSS3 com

Sass e Compass:Variáveis

Agenda• Declarar e usar variáveis

• Compilar Sass em CSS com Scout ou usar linha de comando

Requisitos

• Ruby• Gem Sass• Editor texto• Scout IDE ou terminal

Declarando Variáveis

$highlight-color: #abcdef;$width: 300px;$base-color: #ffff;$background-color: #abcdef;

Referenciando Variáveis

.error { font-color: $base-color; background-color: $background-color; width: $width; border: 1px #f00; }

Variáveis Referenciando Variáveis

$highlight-color: #abcdef;.selected { border: 1px $highlight-color solid;}

$highlight-color: #abcdef;$highlight-border: 1px $highlight-color solid;.selected { border: $highlight-border;}

Hífen ou Underscode?

$highlight-color: #abcdef;.selected { border: 1px $highlight_color solid;}

Hífen ou Underscode?

$highlight-color: #abcdef;.selected { border: 1px $highlight_color solid;}

Hífen ou Underscode?

$highlight-color: #abcdef;.selected { border: 1px $highlight_color solid;}

Hífen ou Underscode?

$highlight-color: #abcdef;.selected { border: 1px $highlight_color solid;}

São Iguais!!!

Download Código Fonte

https://github.com/loiane/curso-css3-sass-compass

Todas as Aulas do Curso

http://www.loiane.com/2012/03/curso-online-css3-com-sass-e-compass-gratuito/

.contato { blog: ‘loiane.com’; facebook: ‘facebook.com/loianegroner’; twitter: ‘@loiane’; github: ‘loiane’; vimeo: ‘loiane’; youtube: ‘loianeg’;}

Obrigada!