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: 5px;!border-radius: 5px;!

Definindo o Mixin:!Bordas Arredondadas!

@mixin rounded-corners {! -moz-border-radius: 5px;! -webkit-border-radius: 5px;! border-radius: 5px;!}!

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-radius: 5px;! border-radius: 5px;!}!

Definindo o Mixin:!Parâmetros!

@mixin link-colors($normal, $hover, $visited) {! color: $normal;! &:hover { color: $hover; }! &:visited { color: $visited; }!}!

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; }!a:visited { color: green; }!

Definindo o Mixin:!Parâmetros - valor default!

@mixin link-colors(! $normal,! $hover: $normal,! $visited: $normal! ) !{! color: $normal;! &:hover { color: $hover; }! &:visited { color: $visited; }!}!

Download Código Fonte!

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

Todas as aulas do curso!

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

http://loiane.com

facebook.com/loianegroner

@loiane

https://github.com/loiane

youtube.com/user/Loianeg

Obrigada!