[curso css3 com sass e compass] aula 08: trabalhando com mixins
DESCRIPTION
http://www.loiane.com/2014/02/curso-css3-com-sass-e-compass-aula-08-trabalhando-com-mixinsTRANSCRIPT
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!