SlideShare uma empresa Scribd logo
1 de 12
Baixar para ler offline
Curso
CSS3 com
Sass e Compass:
Herança
#9
Agenda!
• Herança!
• Quando Usar!
Requisitos!
• Ruby!
• Gem Sass!
• Editor Texto!
• Scout IDE ou terminal!
O que é Herança!

Através da herança um estilo pode herdar as
propriedades de outro estilo
Usando Herança!
@extend!
.loud { !
font-weight: bold; !
}!
!
.quiet { !
font-weight: lighter; !
}!
!
.angry { !
@extend .loud; !
color: red; !
}!
CSS!
.loud, .angry { !
font-weight: bold; !
}!
.quiet { !
font-weight: lighter; !
}!
.angry { !
color: red; !
}!
CSS!
.loud, .angry { !
font-weight: bold; !
}!
.quiet { !
font-weight: lighter; !
}!
.angry { !
color: red; !
}!

class="angry"
CSS!
.loud, .angry { !
font-weight: bold; !
}!
.quiet { !
font-weight: lighter; !
}!
.angry { !
color: red; !
}!

class="angry"

class="angry loud"
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!

Mais conteúdo relacionado

Semelhante a [Curso CSS3 com Sass e Compass] Aula 09: Trabalhando com Herança

Rails front-end com bourbon e sua familia @ Front in Maceió 2014
Rails front-end com bourbon e sua familia @ Front in Maceió 2014Rails front-end com bourbon e sua familia @ Front in Maceió 2014
Rails front-end com bourbon e sua familia @ Front in Maceió 2014Mauro George
 
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptRodrigo Branas
 
Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2Afonso Gomes
 
HTML & CSS - Aula 5
HTML & CSS - Aula 5HTML & CSS - Aula 5
HTML & CSS - Aula 5lucampos_si
 

Semelhante a [Curso CSS3 com Sass e Compass] Aula 09: Trabalhando com Herança (6)

WDI - aula 07 - css com html
WDI - aula 07 - css com htmlWDI - aula 07 - css com html
WDI - aula 07 - css com html
 
Rails front-end com bourbon e sua familia @ Front in Maceió 2014
Rails front-end com bourbon e sua familia @ Front in Maceió 2014Rails front-end com bourbon e sua familia @ Front in Maceió 2014
Rails front-end com bourbon e sua familia @ Front in Maceió 2014
 
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScript
 
Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3
 
Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2
 
HTML & CSS - Aula 5
HTML & CSS - Aula 5HTML & CSS - Aula 5
HTML & CSS - Aula 5
 

Último

[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)Alessandro Almeida
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Dirceu Resende
 
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAEAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAMarcio Venturelli
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfRodolpho Concurde
 
Certificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdfCertificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdfLarissa Souza
 
Apresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdfApresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdfCarlos Gomes
 

Último (6)

[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAEAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
 
Certificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdfCertificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdf
 
Apresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdfApresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdf
 

[Curso CSS3 com Sass e Compass] Aula 09: Trabalhando com Herança