O documento apresenta um curso sobre CSS3 com Sass e Compass, abordando o uso de variáveis em Sass para declarar e referenciar cores, larguras e outros atributos de forma consistente em um projeto. É explicado como compilar arquivos Sass em CSS e os requisitos necessários como Ruby, Gem Sass e um editor de texto.

1. Curso
CSS3 com
Sass e Compass:
Variáveis

3. Agenda
• Declarar e usar variáveis
• Compilar Sass em CSS com Scout ou usar linha de
comando

4. Requisitos
• Ruby
• Gem Sass
• Editor texto
• Scout IDE ou terminal

5. Declarando Variáveis
$highlight-color: #abcdef;
$width: 300px;
$base-color: #ffff;
$background-color: #abcdef;

6. Referenciando Variáveis
.error {
font-color: $base-color;
background-color: $background-color;
width: $width;
border: 1px #f00;
}

7. 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;
}

8. Hífen ou Underscode?
$highlight-color: #abcdef;
.selected {
border: 1px $highlight_color solid;
}

9. Hífen ou Underscode?
$highlight-color: #abcdef;
.selected {
border: 1px $highlight_color solid;
}

10. Hífen ou Underscode?
$highlight-color: #abcdef;
.selected {
border: 1px $highlight_color solid;
}

11. Hífen ou Underscode?
$highlight-color: #abcdef;
.selected {
border: 1px $highlight_color solid;
}
São Iguais!!!

12. Download Código Fonte
https://github.com/loiane/
curso-css3-sass-compass

13. Todas as Aulas do Curso
http://www.loiane.com/2012/03/curso-online-css3-
com-sass-e-compass-gratuito/

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

15. Obrigada!