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

17
Curso CSS3 com Sass e Compass: Mixins # 8

description

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

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

Page 1: [Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins

Curso CSS3 com

Sass e Compass: Mixins

#8

Page 2: [Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins

Agenda!• Mixins!

• Quando Usar!

Page 3: [Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins

Requisitos!• Ruby!

• Gem Sass!

• Editor Texto!

• Scout IDE ou terminal!

Page 4: [Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins

O que são Mixins!

Propriedades que podem ser reutilizadas em outros estilos

Page 5: [Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins

CSS3: Bordas Arredondadas!

http://www.w3schools.com/css/css3_borders.asp

-moz-border-radius: 5px;!-webkit-border-radius: 5px;!border-radius: 5px;!

Page 6: [Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins

Definindo o Mixin:!Bordas Arredondadas!

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

Page 7: [Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins

Usando Mixins:

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

Page 8: [Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins

CSS gerado

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

Page 9: [Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins

Definindo o Mixin:!Parâmetros!

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

Page 10: [Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins

Usando Mixins com parâmetros:

Page 11: [Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins

Usando Mixins com parâmetros:

a {! @include link-colors(blue, red, green);!}!

Page 12: [Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins

Usando Mixins com parâmetros:

a {! @include link-colors(blue, red, green);!}!

a { color: blue; }!a:hover { color: red; }!a:visited { color: green; }!

Page 13: [Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins

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

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

Page 14: [Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins

Download Código Fonte!

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

Page 15: [Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins

Todas as aulas do curso!

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

Page 16: [Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins

http://loiane.com

facebook.com/loianegroner

@loiane

https://github.com/loiane

youtube.com/user/Loianeg

Page 17: [Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins

Obrigada!