Curso CSS3 com Sass e Compass - Aula 05: Variaveis
-
Upload
loiane-groner -
Category
Technology
-
view
2.910 -
download
2
Transcript of Curso CSS3 com Sass e Compass - Aula 05: Variaveis
![Page 1: Curso CSS3 com Sass e Compass - Aula 05: Variaveis](https://reader033.fdocuments.us/reader033/viewer/2022052621/5584b2bed8b42a8f768b4786/html5/thumbnails/1.jpg)
CursoCSS3 com
Sass e Compass:Variáveis
![Page 2: Curso CSS3 com Sass e Compass - Aula 05: Variaveis](https://reader033.fdocuments.us/reader033/viewer/2022052621/5584b2bed8b42a8f768b4786/html5/thumbnails/2.jpg)
![Page 3: Curso CSS3 com Sass e Compass - Aula 05: Variaveis](https://reader033.fdocuments.us/reader033/viewer/2022052621/5584b2bed8b42a8f768b4786/html5/thumbnails/3.jpg)
Agenda• Declarar e usar variáveis
• Compilar Sass em CSS com Scout ou usar linha de comando
![Page 4: Curso CSS3 com Sass e Compass - Aula 05: Variaveis](https://reader033.fdocuments.us/reader033/viewer/2022052621/5584b2bed8b42a8f768b4786/html5/thumbnails/4.jpg)
Requisitos
• Ruby• Gem Sass• Editor texto• Scout IDE ou terminal
![Page 5: Curso CSS3 com Sass e Compass - Aula 05: Variaveis](https://reader033.fdocuments.us/reader033/viewer/2022052621/5584b2bed8b42a8f768b4786/html5/thumbnails/5.jpg)
Declarando Variáveis
$highlight-color: #abcdef;$width: 300px;$base-color: #ffff;$background-color: #abcdef;
![Page 6: Curso CSS3 com Sass e Compass - Aula 05: Variaveis](https://reader033.fdocuments.us/reader033/viewer/2022052621/5584b2bed8b42a8f768b4786/html5/thumbnails/6.jpg)
Referenciando Variáveis
.error { font-color: $base-color; background-color: $background-color; width: $width; border: 1px #f00; }
![Page 7: Curso CSS3 com Sass e Compass - Aula 05: Variaveis](https://reader033.fdocuments.us/reader033/viewer/2022052621/5584b2bed8b42a8f768b4786/html5/thumbnails/7.jpg)
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;}
![Page 8: Curso CSS3 com Sass e Compass - Aula 05: Variaveis](https://reader033.fdocuments.us/reader033/viewer/2022052621/5584b2bed8b42a8f768b4786/html5/thumbnails/8.jpg)
Hífen ou Underscode?
$highlight-color: #abcdef;.selected { border: 1px $highlight_color solid;}
![Page 9: Curso CSS3 com Sass e Compass - Aula 05: Variaveis](https://reader033.fdocuments.us/reader033/viewer/2022052621/5584b2bed8b42a8f768b4786/html5/thumbnails/9.jpg)
Hífen ou Underscode?
$highlight-color: #abcdef;.selected { border: 1px $highlight_color solid;}
![Page 10: Curso CSS3 com Sass e Compass - Aula 05: Variaveis](https://reader033.fdocuments.us/reader033/viewer/2022052621/5584b2bed8b42a8f768b4786/html5/thumbnails/10.jpg)
Hífen ou Underscode?
$highlight-color: #abcdef;.selected { border: 1px $highlight_color solid;}
![Page 11: Curso CSS3 com Sass e Compass - Aula 05: Variaveis](https://reader033.fdocuments.us/reader033/viewer/2022052621/5584b2bed8b42a8f768b4786/html5/thumbnails/11.jpg)
Hífen ou Underscode?
$highlight-color: #abcdef;.selected { border: 1px $highlight_color solid;}
São Iguais!!!
![Page 12: Curso CSS3 com Sass e Compass - Aula 05: Variaveis](https://reader033.fdocuments.us/reader033/viewer/2022052621/5584b2bed8b42a8f768b4786/html5/thumbnails/12.jpg)
Download Código Fonte
https://github.com/loiane/curso-css3-sass-compass
![Page 13: Curso CSS3 com Sass e Compass - Aula 05: Variaveis](https://reader033.fdocuments.us/reader033/viewer/2022052621/5584b2bed8b42a8f768b4786/html5/thumbnails/13.jpg)
Todas as Aulas do Curso
http://www.loiane.com/2012/03/curso-online-css3-com-sass-e-compass-gratuito/
![Page 14: Curso CSS3 com Sass e Compass - Aula 05: Variaveis](https://reader033.fdocuments.us/reader033/viewer/2022052621/5584b2bed8b42a8f768b4786/html5/thumbnails/14.jpg)
.contato { blog: ‘loiane.com’; facebook: ‘facebook.com/loianegroner’; twitter: ‘@loiane’; github: ‘loiane’; vimeo: ‘loiane’; youtube: ‘loianeg’;}
![Page 15: Curso CSS3 com Sass e Compass - Aula 05: Variaveis](https://reader033.fdocuments.us/reader033/viewer/2022052621/5584b2bed8b42a8f768b4786/html5/thumbnails/15.jpg)
Obrigada!