SlideShare uma empresa Scribd logo
1 de 14
Baixar para ler offline
CSS com super poderes
Nayama Rosa
Aluna da 2 geração na Laboratoria
Desenvolvedora Front-end Jr - CvcCorp
https://www.linkedin.com/in/nayamarosa/
https://github.com/nayamarosa
Håkon Wium Lie
Bert Bos
Fontes:
https://www.w3.org/Style/CSS20/history.html
https://www.w3.org/Style/CSS20/challenges.html
https://www.w3.org/Style/CSS20/
1994 1995 1996 1998 1999 2006
W3C
CSS1
CSS2
CSS3
Linha do tempo
quando surgiu o CSS?
Cascading Style Sheets Hampton Catlin
Pré processadores CSS
o que são e para que servem?
● Código limpo (nesting e variáveis)
● “DRY”
● Dão mais flexibilidade ao código
● Manutenção mais fácil
● Organização do CSS
Fonte:
SASS for CSS: Advance your frontend skills with CSS preprocessor
Sass
o que é o Sass?
“Sass é a linguagem de extensão CSS de nível profissional mais madura, estável e poderosa do mundo.”
● Syntactically Awesome Style Sheets
● Pré processador CSS
● Originalmente escrito em Ruby
● Atualmente tem suporte em diversas linguagens(Node, Java, PHP…)
Fonte:
https://sass-lang.com/libsass
Sass x CSS
mas eu preciso ser muito bom em CSS?
CSS3Sass
Sass x Scss
qual a diferença das extensões?
.sass .scss
Nesting
Escrevendo com o Sass
o que eu preciso saber?
Escrevendo com o Sass
o que eu preciso saber?
Variáveis
Escrevendo com o Sass
o que eu preciso saber?
Mixins
Escrevendo com o Sass
o que eu preciso saber?
Extend/Herança(placeholder class)
Mais do Sass
o que mais ele tem de diferente?
● Funções especiais
○ url( )
○ calc( )
○ min( ) e max( )
● Operadores
○ + e -
○ *, / e %
○ <, <=, > e >=
○ == e !=
● At-rules
○ @use
○ @function
○ @import
○ @mixin e @include
○ @extend
● Partial
○ _file.scss
Instalando o Sass
como eu uso no meu projeto?
1º 2º 3º 4º
Instalar
Node.js
Executar
npm init
Executar
npm install node-sass
Atualizar
package.json
"scss": "node-sass -w scss -o css"
node-sass: referente ao pacote node-sass
-w scss: observa arquivos .scss na pasta /scss e recompila se algo mudar
-o css: pasta de destino do css compilado
5º
Executar
npm run scss
Fonte:
https://www.npmjs.com/package/node-sass
Demonstração

Mais conteúdo relacionado

Mais procurados

NoSQL no Azure - Azure Tech Nights - 2017
NoSQL no Azure - Azure Tech Nights - 2017NoSQL no Azure - Azure Tech Nights - 2017
NoSQL no Azure - Azure Tech Nights - 2017Renato Groff
 
Curso de WordPress - Não Sei Programar - Cristiano Santos
Curso de WordPress - Não Sei Programar - Cristiano SantosCurso de WordPress - Não Sei Programar - Cristiano Santos
Curso de WordPress - Não Sei Programar - Cristiano Santosaluni_ead
 
Curso de WordPress para não programadores - Aula 002 - Cristiano Santos
Curso de WordPress para não programadores - Aula 002 - Cristiano SantosCurso de WordPress para não programadores - Aula 002 - Cristiano Santos
Curso de WordPress para não programadores - Aula 002 - Cristiano Santosaluni_ead
 
Azure Cosmos DB para Desenvolvedores - From Zero to Hero - Março-2018
Azure Cosmos DB para Desenvolvedores - From Zero to Hero - Março-2018Azure Cosmos DB para Desenvolvedores - From Zero to Hero - Março-2018
Azure Cosmos DB para Desenvolvedores - From Zero to Hero - Março-2018Renato Groffe
 
Agilizando o desenvolvimento web com SASS
Agilizando o desenvolvimento web com SASSAgilizando o desenvolvimento web com SASS
Agilizando o desenvolvimento web com SASSRenato Galvão
 
Introdução ao NoSQL e modelagem de dados com MongoDB
Introdução ao NoSQL e modelagem de dados com MongoDBIntrodução ao NoSQL e modelagem de dados com MongoDB
Introdução ao NoSQL e modelagem de dados com MongoDBJhonathan de Souza Soares
 
NoSQL para Desenvolvedores .NET - Developers-SP - Setembro-2017
NoSQL para Desenvolvedores .NET - Developers-SP - Setembro-2017NoSQL para Desenvolvedores .NET - Developers-SP - Setembro-2017
NoSQL para Desenvolvedores .NET - Developers-SP - Setembro-2017Renato Groff
 
Tecnologias de bancos de dados no Azure: conhecendo as opções relacionais e N...
Tecnologias de bancos de dados no Azure: conhecendo as opções relacionais e N...Tecnologias de bancos de dados no Azure: conhecendo as opções relacionais e N...
Tecnologias de bancos de dados no Azure: conhecendo as opções relacionais e N...Renato Groff
 
Introdução a NoSQL com MongoDB e FireDAC
Introdução a NoSQL com MongoDB e FireDAC Introdução a NoSQL com MongoDB e FireDAC
Introdução a NoSQL com MongoDB e FireDAC Fernando Rizzato
 
Criando sistemas de recomendação com Neo4j
Criando sistemas de recomendação com Neo4jCriando sistemas de recomendação com Neo4j
Criando sistemas de recomendação com Neo4jJhonathan de Souza Soares
 
Palestra ror edted
Palestra ror edtedPalestra ror edted
Palestra ror edtedbrunoaalves
 
Aula 5 java script
Aula 5   java scriptAula 5   java script
Aula 5 java scriptandreluizlc
 

Mais procurados (16)

Sass presentation
Sass presentationSass presentation
Sass presentation
 
NoSQL no Azure - Azure Tech Nights - 2017
NoSQL no Azure - Azure Tech Nights - 2017NoSQL no Azure - Azure Tech Nights - 2017
NoSQL no Azure - Azure Tech Nights - 2017
 
Curso de WordPress - Não Sei Programar - Cristiano Santos
Curso de WordPress - Não Sei Programar - Cristiano SantosCurso de WordPress - Não Sei Programar - Cristiano Santos
Curso de WordPress - Não Sei Programar - Cristiano Santos
 
WordCamp Lisbon
WordCamp LisbonWordCamp Lisbon
WordCamp Lisbon
 
Curso de WordPress para não programadores - Aula 002 - Cristiano Santos
Curso de WordPress para não programadores - Aula 002 - Cristiano SantosCurso de WordPress para não programadores - Aula 002 - Cristiano Santos
Curso de WordPress para não programadores - Aula 002 - Cristiano Santos
 
Azure Cosmos DB para Desenvolvedores - From Zero to Hero - Março-2018
Azure Cosmos DB para Desenvolvedores - From Zero to Hero - Março-2018Azure Cosmos DB para Desenvolvedores - From Zero to Hero - Março-2018
Azure Cosmos DB para Desenvolvedores - From Zero to Hero - Março-2018
 
Agilizando o desenvolvimento web com SASS
Agilizando o desenvolvimento web com SASSAgilizando o desenvolvimento web com SASS
Agilizando o desenvolvimento web com SASS
 
Introdução ao NoSQL e modelagem de dados com MongoDB
Introdução ao NoSQL e modelagem de dados com MongoDBIntrodução ao NoSQL e modelagem de dados com MongoDB
Introdução ao NoSQL e modelagem de dados com MongoDB
 
NoSQL para Desenvolvedores .NET - Developers-SP - Setembro-2017
NoSQL para Desenvolvedores .NET - Developers-SP - Setembro-2017NoSQL para Desenvolvedores .NET - Developers-SP - Setembro-2017
NoSQL para Desenvolvedores .NET - Developers-SP - Setembro-2017
 
NoSQL + Node.js
NoSQL + Node.jsNoSQL + Node.js
NoSQL + Node.js
 
Tecnologias de bancos de dados no Azure: conhecendo as opções relacionais e N...
Tecnologias de bancos de dados no Azure: conhecendo as opções relacionais e N...Tecnologias de bancos de dados no Azure: conhecendo as opções relacionais e N...
Tecnologias de bancos de dados no Azure: conhecendo as opções relacionais e N...
 
Introdução a NoSQL com MongoDB e FireDAC
Introdução a NoSQL com MongoDB e FireDAC Introdução a NoSQL com MongoDB e FireDAC
Introdução a NoSQL com MongoDB e FireDAC
 
Criando sistemas de recomendação com Neo4j
Criando sistemas de recomendação com Neo4jCriando sistemas de recomendação com Neo4j
Criando sistemas de recomendação com Neo4j
 
Palestra ror edted
Palestra ror edtedPalestra ror edted
Palestra ror edted
 
Sem limites com NoSQL
Sem limites com NoSQLSem limites com NoSQL
Sem limites com NoSQL
 
Aula 5 java script
Aula 5   java scriptAula 5   java script
Aula 5 java script
 

Semelhante a Introdução ao Sass - CSS com super poderes

CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012André Paulovich
 
Facilitando sua vida com SASS
Facilitando sua vida com SASSFacilitando sua vida com SASS
Facilitando sua vida com SASSLarissa Carvalho
 
Alta produtividade com front end com sass e compass
Alta produtividade com front end com sass e compassAlta produtividade com front end com sass e compass
Alta produtividade com front end com sass e compassDanilo Sousa
 
SASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-endSASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-endAnderson Aguiar
 
CSS {Grid} Layout: It's evolution baby
CSS {Grid} Layout: It's evolution babyCSS {Grid} Layout: It's evolution baby
CSS {Grid} Layout: It's evolution babyCriciúma Dev
 
Conheça o Sass, mehor amigo do seu CSS - Nayara Felix
Conheça o Sass, mehor amigo do seu CSS - Nayara FelixConheça o Sass, mehor amigo do seu CSS - Nayara Felix
Conheça o Sass, mehor amigo do seu CSS - Nayara FelixNayara Felix
 
Otimização de tempo com SASS preprocessor
Otimização de tempo com SASS preprocessorOtimização de tempo com SASS preprocessor
Otimização de tempo com SASS preprocessorPaullo Norato
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdfRubenManhia
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoAnyssa Ferreira
 
[Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins
[Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins[Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins
[Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com MixinsLoiane Groner
 
html, css e java script - renato araujo
html, css e java script - renato araujohtml, css e java script - renato araujo
html, css e java script - renato araujoorenatoaraujo
 
Design Responsivo com Sass
Design Responsivo com SassDesign Responsivo com Sass
Design Responsivo com SassVitor Garcia
 
Aula 4 e 5 css e java script
Aula 4 e 5   css e java scriptAula 4 e 5   css e java script
Aula 4 e 5 css e java scriptandreluizlc
 

Semelhante a Introdução ao Sass - CSS com super poderes (20)

CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
 
Facilitando sua vida com SASS
Facilitando sua vida com SASSFacilitando sua vida com SASS
Facilitando sua vida com SASS
 
Alta produtividade com front end com sass e compass
Alta produtividade com front end com sass e compassAlta produtividade com front end com sass e compass
Alta produtividade com front end com sass e compass
 
SASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-endSASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-end
 
CSS 3
CSS 3CSS 3
CSS 3
 
CSS {Grid} Layout: It's evolution baby
CSS {Grid} Layout: It's evolution babyCSS {Grid} Layout: It's evolution baby
CSS {Grid} Layout: It's evolution baby
 
Conheça o Sass, mehor amigo do seu CSS - Nayara Felix
Conheça o Sass, mehor amigo do seu CSS - Nayara FelixConheça o Sass, mehor amigo do seu CSS - Nayara Felix
Conheça o Sass, mehor amigo do seu CSS - Nayara Felix
 
Otimização de tempo com SASS preprocessor
Otimização de tempo com SASS preprocessorOtimização de tempo com SASS preprocessor
Otimização de tempo com SASS preprocessor
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
 
[Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins
[Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins[Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins
[Curso CSS3 com Sass e Compass] Aula 08: Trabalhando com Mixins
 
Javascript nos dias de hoje
Javascript nos dias de hojeJavascript nos dias de hoje
Javascript nos dias de hoje
 
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativosModular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
 
Desmistificando o PostCSS
Desmistificando o PostCSSDesmistificando o PostCSS
Desmistificando o PostCSS
 
Aula 07 Css - Parte 1
Aula 07   Css - Parte 1Aula 07   Css - Parte 1
Aula 07 Css - Parte 1
 
html, css e java script - renato araujo
html, css e java script - renato araujohtml, css e java script - renato araujo
html, css e java script - renato araujo
 
Design Responsivo com Sass
Design Responsivo com SassDesign Responsivo com Sass
Design Responsivo com Sass
 
Aula 4 e 5 css e java script
Aula 4 e 5   css e java scriptAula 4 e 5   css e java script
Aula 4 e 5 css e java script
 
CSS
CSSCSS
CSS
 
CSS3: Start (aula 1)
CSS3: Start (aula 1)CSS3: Start (aula 1)
CSS3: Start (aula 1)
 

Ú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
 
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
 
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
 

Ú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
 
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
 
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
 

Introdução ao Sass - CSS com super poderes

  • 1. CSS com super poderes
  • 2. Nayama Rosa Aluna da 2 geração na Laboratoria Desenvolvedora Front-end Jr - CvcCorp https://www.linkedin.com/in/nayamarosa/ https://github.com/nayamarosa
  • 3. Håkon Wium Lie Bert Bos Fontes: https://www.w3.org/Style/CSS20/history.html https://www.w3.org/Style/CSS20/challenges.html https://www.w3.org/Style/CSS20/ 1994 1995 1996 1998 1999 2006 W3C CSS1 CSS2 CSS3 Linha do tempo quando surgiu o CSS? Cascading Style Sheets Hampton Catlin
  • 4. Pré processadores CSS o que são e para que servem? ● Código limpo (nesting e variáveis) ● “DRY” ● Dão mais flexibilidade ao código ● Manutenção mais fácil ● Organização do CSS Fonte: SASS for CSS: Advance your frontend skills with CSS preprocessor
  • 5. Sass o que é o Sass? “Sass é a linguagem de extensão CSS de nível profissional mais madura, estável e poderosa do mundo.” ● Syntactically Awesome Style Sheets ● Pré processador CSS ● Originalmente escrito em Ruby ● Atualmente tem suporte em diversas linguagens(Node, Java, PHP…) Fonte: https://sass-lang.com/libsass
  • 6. Sass x CSS mas eu preciso ser muito bom em CSS? CSS3Sass
  • 7. Sass x Scss qual a diferença das extensões? .sass .scss
  • 8. Nesting Escrevendo com o Sass o que eu preciso saber?
  • 9. Escrevendo com o Sass o que eu preciso saber? Variáveis
  • 10. Escrevendo com o Sass o que eu preciso saber? Mixins
  • 11. Escrevendo com o Sass o que eu preciso saber? Extend/Herança(placeholder class)
  • 12. Mais do Sass o que mais ele tem de diferente? ● Funções especiais ○ url( ) ○ calc( ) ○ min( ) e max( ) ● Operadores ○ + e - ○ *, / e % ○ <, <=, > e >= ○ == e != ● At-rules ○ @use ○ @function ○ @import ○ @mixin e @include ○ @extend ● Partial ○ _file.scss
  • 13. Instalando o Sass como eu uso no meu projeto? 1º 2º 3º 4º Instalar Node.js Executar npm init Executar npm install node-sass Atualizar package.json "scss": "node-sass -w scss -o css" node-sass: referente ao pacote node-sass -w scss: observa arquivos .scss na pasta /scss e recompila se algo mudar -o css: pasta de destino do css compilado 5º Executar npm run scss Fonte: https://www.npmjs.com/package/node-sass