0
Curso
CSS3 com
Sass e Compass:
Mixins
#8
Agenda!
• Mixins!
• Quando Usar!
Requisitos!
• Ruby!
• Gem Sass!
• Editor Texto!
• Scout IDE ou terminal!
O que são Mixins!

Propriedades que podem ser reutilizadas em outros
estilos
CSS3: Bordas Arredondadas!
http://www.w3schools.com/css/css3_borders.asp

-moz-border-radius: 5px;!
-webkit-border-radius:...
Definindo o Mixin:!
Bordas Arredondadas!
@mixin rounded-corners {!
-moz-border-radius: 5px;!
-webkit-border-radius: 5px;!
b...
Usando Mixins:
.noticia {!
background-color: green;!
border: 2px solid #00aa00;!
@include rounded-corners;!
}!
CSS gerado
.noticia {!
background-color: green;!
border: 2px solid #00aa00;!
-moz-border-radius: 5px;!
-webkit-border-radi...
Definindo o Mixin:!
Parâmetros!
@mixin link-colors($normal, $hover, $visited) {!
color: $normal;!
&:hover { color: $hover; ...
Usando Mixins com
parâmetros:
Usando Mixins com
parâmetros:
a {!
@include link-colors(blue, red, green);!
}!
Usando Mixins com
parâmetros:
a {!
@include link-colors(blue, red, green);!
}!

a { color: blue; }!
a:hover { color: red; ...
Definindo o Mixin:!
Parâmetros - valor default!
@mixin link-colors(!
$normal,!
$hover: $normal,!
$visited: $normal!
) !
{!
...
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 08: Trabalhando com Mixins

1,815

Published on

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

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

  • Be the first to like this

No Downloads
Views
Total Views
1,815
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "[Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins"

  1. 1. Curso CSS3 com Sass e Compass: Mixins #8
  2. 2. Agenda! • Mixins! • Quando Usar!
  3. 3. Requisitos! • Ruby! • Gem Sass! • Editor Texto! • Scout IDE ou terminal!
  4. 4. O que são Mixins! Propriedades que podem ser reutilizadas em outros estilos
  5. 5. CSS3: Bordas Arredondadas! http://www.w3schools.com/css/css3_borders.asp -moz-border-radius: 5px;! -webkit-border-radius: 5px;! border-radius: 5px;!
  6. 6. Definindo o Mixin:! Bordas Arredondadas! @mixin rounded-corners {! -moz-border-radius: 5px;! -webkit-border-radius: 5px;! border-radius: 5px;! }!
  7. 7. Usando Mixins: .noticia {! background-color: green;! border: 2px solid #00aa00;! @include rounded-corners;! }!
  8. 8. CSS gerado .noticia {! background-color: green;! border: 2px solid #00aa00;! -moz-border-radius: 5px;! -webkit-border-radius: 5px;! border-radius: 5px;! }!
  9. 9. Definindo o Mixin:! Parâmetros! @mixin link-colors($normal, $hover, $visited) {! color: $normal;! &:hover { color: $hover; }! &:visited { color: $visited; }! }!
  10. 10. Usando Mixins com parâmetros:
  11. 11. Usando Mixins com parâmetros: a {! @include link-colors(blue, red, green);! }!
  12. 12. Usando Mixins com parâmetros: a {! @include link-colors(blue, red, green);! }! a { color: blue; }! a:hover { color: red; }! a:visited { color: green; }!
  13. 13. Definindo o Mixin:! Parâmetros - valor default! @mixin link-colors(! $normal,! $hover: $normal,! $visited: $normal! ) ! {! color: $normal;! &:hover { color: $hover; }! &:visited { color: $visited; }! }!
  14. 14. Download Código Fonte! https://github.com/loiane/ curso-css3-sass-compass
  15. 15. Todas as aulas do curso! http://www.loiane.com/2012/03/curso-onlinecss3-com-sass-e-compass-gratuito/
  16. 16. http://loiane.com facebook.com/loianegroner @loiane https://github.com/loiane youtube.com/user/Loianeg
  17. 17. Obrigada!
  1. A particular slide catching your eye?

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

×