advertisement

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

75 %
25 %
advertisement
Information about [Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins
Technology

Published on February 28, 2014

Author: loianeg

Source: slideshare.net

Description

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

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-onlinecss3-com-sass-e-compass-gratuito/

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

Obrigada!

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

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

[Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins Loiane Groner. Subscribe Subscribed Unsubscribe 22,808 22K. Loading... Loading...
Read more

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

[Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins. Vídeo/Screencast de hoje: aula 08 do curso gratuito de CSS3 com Sass e Compass!
Read more

[Curso CSS3 com Sass e Compass] Aula 09: Trabalhando com ...

[Curso CSS3 com Sass e Compass] Aula 09: Trabalhando com Herança Loiane Groner. ... Aula 08: Trabalhando com Mixins - Duration: 13:05.
Read more

Sass | Loiane Groner

... Aula 08: Trabalhando com Mixins. 28/02/2014 28/02/2014 Loiane. Vídeo/Screencast de hoje: aula 08 do curso gratuito de CSS3 com Sass e Compass!
Read more

Aula 08 - trabalhando com gradiente

Aula 08 – Trabalhando com cores. Composição de cores (CMYK e RGB) Nomenclatura (4/2, 4/4 – paleta color) Gradiente (Criar, editar, criar estilo com ...
Read more

Excel - Aula 08 - Trabalhando com Planilhas(1) - Download ...

Excel - Aula 08 - Trabalhando com Planilhas(1) is hosted at free file sharing service 4shared. | More... Less. Download:. Share Add to ...
Read more

'Anglificando' a sala de aula! + Trabalhando com os 'projcts'

'Anglificando' a sala de aula! + Trabalhando com o... The roles of the teacher; Quando os alunos falam coisas em Inglês ...
Read more

Criatividade em Sala de Aula!: Trabalhando vídeos e ...

Será uma aula genial !!! Postado por ... 10 de junho de 2009 08:45 Janete Gomes disse ... Trabalhando com rótulos!
Read more

Cantinho da Profe Adri ♥ ♥ ♥: ♥ Trabalhando Com ...

às 08:16 Postado por Adri. Marcadores ... mas gosto mesmo da sala de aula. Estou no momento trabalhando com Pré-escolar e ... ♥ Trabalhando ...
Read more

Dani Educar : TRABALHANDO COM DINHEIRINHO

TRABALHANDO COM DINHEIRINHO Postado por Dani cristina às 09:34. ... sala de aula (1) Sentimentos (3) SETE CAMUNDONGOS CEGOS (1) SETEMBRO (2 ...
Read more