Apresentação feita no Webinar da Laboratoria, falando um pouco sobre pré processadores CSS, Sass e como utilizá-lo dando exemplos com códigos.

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

14. Demonstração