Este documento apresenta mixings no Sass, propriedades CSS que podem ser reutilizadas em outros estilos. Dois exemplos são apresentados: um mixin para bordas arredondadas e outro para cores de link que aceita parâmetros. O uso de mixings permite reaproveitar declarações CSS evitando repetição.

1. Curso
CSS3 com
Sass e Compass:
Mixins
#8

2. Agenda!
• Mixins!
• Quando Usar!

3. Requisitos!
• Ruby!
• Gem Sass!
• Editor Texto!
• Scout IDE ou terminal!

4. O que são Mixins!
Propriedades que podem ser reutilizadas em outros
estilos

5. CSS3: Bordas Arredondadas!
http://www.w3schools.com/css/css3_borders.asp
-moz-border-radius: 5px;!
-webkit-border-radius: 5px;!
border-radius: 5px;!

6. Definindo o Mixin:!
Bordas Arredondadas!
@mixin rounded-corners {!
-moz-border-radius: 5px;!
-webkit-border-radius: 5px;!
border-radius: 5px;!
}!

7. Usando Mixins:
.noticia {!
background-color: green;!
border: 2px solid #00aa00;!
@include rounded-corners;!
}!

8. CSS gerado
.noticia {!
background-color: green;!
border: 2px solid #00aa00;!
-moz-border-radius: 5px;!
-webkit-border-radius: 5px;!
border-radius: 5px;!
}!

9. Definindo o Mixin:!
Parâmetros!
@mixin link-colors($normal, $hover, $visited) {!
color: $normal;!
&:hover { color: $hover; }!
&:visited { color: $visited; }!
}!

10. Usando Mixins com
parâmetros:

11. Usando Mixins com
parâmetros:
a {!
@include link-colors(blue, red, green);!
}!

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

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

15. Todas as aulas do curso!
http://www.loiane.com/2012/03/curso-onlinecss3-com-sass-e-compass-gratuito/

16. http://loiane.com
facebook.com/loianegroner
@loiane
https://github.com/loiane
youtube.com/user/Loianeg

17. Obrigada!