12
Curso CSS3 com Sass e Compass: Herança # 9

[Curso CSS3 com Sass e Compass] Aula 09: Trabalhando com Herança

Embed Size (px)

Citation preview

Page 1: [Curso CSS3 com Sass e Compass] Aula 09: Trabalhando com Herança

Curso CSS3 com

Sass e Compass: Herança

#9

Page 2: [Curso CSS3 com Sass e Compass] Aula 09: Trabalhando com Herança

Agenda!• Herança!

• Quando Usar!

Page 3: [Curso CSS3 com Sass e Compass] Aula 09: Trabalhando com Herança

Requisitos!• Ruby!

• Gem Sass!

• Editor Texto!

• Scout IDE ou terminal!

Page 4: [Curso CSS3 com Sass e Compass] Aula 09: Trabalhando com Herança

O que é Herança!

Através da herança um estilo pode herdar as propriedades de outro estilo

Page 5: [Curso CSS3 com Sass e Compass] Aula 09: Trabalhando com Herança

Usando Herança!@extend!

.loud { ! font-weight: bold; !}!!.quiet { ! font-weight: lighter; !}!!.angry { ! @extend .loud; ! color: red; !}!

Page 6: [Curso CSS3 com Sass e Compass] Aula 09: Trabalhando com Herança

CSS!.loud, .angry { ! font-weight: bold; !}!.quiet { ! font-weight: lighter; !}!.angry { ! color: red; !}!

Page 7: [Curso CSS3 com Sass e Compass] Aula 09: Trabalhando com Herança

CSS!.loud, .angry { ! font-weight: bold; !}!.quiet { ! font-weight: lighter; !}!.angry { ! color: red; !}!

class="angry"

Page 8: [Curso CSS3 com Sass e Compass] Aula 09: Trabalhando com Herança

CSS!.loud, .angry { ! font-weight: bold; !}!.quiet { ! font-weight: lighter; !}!.angry { ! color: red; !}!

class="angry" class="angry loud"

Page 9: [Curso CSS3 com Sass e Compass] Aula 09: Trabalhando com Herança

Download Código Fonte!

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

Page 10: [Curso CSS3 com Sass e Compass] Aula 09: Trabalhando com Herança

Todas as aulas do curso!

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

Page 11: [Curso CSS3 com Sass e Compass] Aula 09: Trabalhando com Herança

http://loiane.com

facebook.com/loianegroner

@loiane

https://github.com/loiane

youtube.com/user/Loianeg

Page 12: [Curso CSS3 com Sass e Compass] Aula 09: Trabalhando com Herança

Obrigada!