Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,230 views

Published on

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

Published in: Technology
  • Be the first to comment

[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!

×