Curso
CSS3 com
Sass e Compass:
Herança
#9
Agenda!
• Herança!
• Quando Usar!
Requisitos!
• Ruby!
• Gem Sass!
• Editor Texto!
• Scout IDE ou terminal!
O que é Herança!

Através da herança um estilo pode herdar as
propriedades de outro estilo
Usando Herança!
@extend!
.loud { !
font-weight: bold; !
}!
!
.quiet { !
font-weight: lighter; !
}!
!
.angry { !
@extend .l...
CSS!
.loud, .angry { !
font-weight: bold; !
}!
.quiet { !
font-weight: lighter; !
}!
.angry { !
color: red; !
}!
CSS!
.loud, .angry { !
font-weight: bold; !
}!
.quiet { !
font-weight: lighter; !
}!
.angry { !
color: red; !
}!

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

class="a...
Download Código Fonte!
https://github.com/loiane/
curso-css3-sass-compass
Todas as aulas do curso!
http://www.loiane.com/2012/03/curso-onlinecss3-com-sass-e-compass-gratuito/
http://loiane.com
facebook.com/loianegroner

@loiane
https://github.com/loiane
youtube.com/user/Loianeg
Obrigada!
Upcoming SlideShare
Loading in...5
×

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

1,197

Published on

http://www.loiane.com/2014/02/curso-css3-com-sass-e-compass-aula-09-trabalhando-com-heranca/

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,197
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. Curso CSS3 com Sass e Compass: Herança #9
  2. 2. Agenda! • Herança! • Quando Usar!
  3. 3. Requisitos! • Ruby! • Gem Sass! • Editor Texto! • Scout IDE ou terminal!
  4. 4. O que é Herança! Através da herança um estilo pode herdar as propriedades de outro estilo
  5. 5. Usando Herança! @extend! .loud { ! font-weight: bold; ! }! ! .quiet { ! font-weight: lighter; ! }! ! .angry { ! @extend .loud; ! color: red; ! }!
  6. 6. CSS! .loud, .angry { ! font-weight: bold; ! }! .quiet { ! font-weight: lighter; ! }! .angry { ! color: red; ! }!
  7. 7. CSS! .loud, .angry { ! font-weight: bold; ! }! .quiet { ! font-weight: lighter; ! }! .angry { ! color: red; ! }! class="angry"
  8. 8. CSS! .loud, .angry { ! font-weight: bold; ! }! .quiet { ! font-weight: lighter; ! }! .angry { ! color: red; ! }! class="angry" class="angry loud"
  9. 9. Download Código Fonte! https://github.com/loiane/ curso-css3-sass-compass
  10. 10. Todas as aulas do curso! http://www.loiane.com/2012/03/curso-onlinecss3-com-sass-e-compass-gratuito/
  11. 11. http://loiane.com facebook.com/loianegroner @loiane https://github.com/loiane youtube.com/user/Loianeg
  12. 12. Obrigada!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×