O documento discute o pré-processador Sass, que repara problemas encontrados no CSS tradicional ao permitir variáveis, aninhamento, operadores matemáticos e funções, facilitando a codificação e manutenção de folhas de estilo. Sass permite também criar mixins para reutilizar código e funções nativas para modificar cores.

1. Sass
Estilo levado à sério

2. Gabriel Nunes
● Graduando de Ciência da
Computação
● Técnico em Informática
● Núcleo de Tecnologia da
Informação - UFAL
● Front-end Developer

3. Por que usar Sass?

4. Atualmente no CSS
● Muitos prefixos
● Folhas de estilo muito longas
● Repetição de valores e códigos

5. O que é o Sass?

6. O que é o Sass?
● Repara os problemas encontrados no
CSS
● Pré-processador de folha de estilo

7. Pré-processadores

8. Pré-processador
● É um programa que realiza conversões
lexicas em seu código
● Permite adicionar ou substituir elementos

9. Pré-processador Sass
● Criado em 2007 por Hampton Catlin
● RubyGem
● Facilita a codificação e a manutenção
● Evita desorganização e repetição de código
● CSS Dinâmico

10. Pré-processador Sass
● Assiste mudanças no seu arquivo
● Exporta do Sass para CSS
sass --watch style.scss:style.css a

11. .sass or .scss
Padrão de codificação

12. .sass or .scss
SASS
$blue: #3bbfce
$margin: 16px
.border
padding: $margin / 2
border-color: $blue
SCSS
$blue: #3bbfce;
$margin: 16px;
.border {
padding: $margin / 2;
border-color: $blue;
}

13. Variáveis
Sim, é isso mesmo!

14. Variáveis
SASS
$blue: #3bbfce;
body {
background-color: $blue;
}
CSS
body {
background-color: 3bbfce;
}

15. Aninhamento
Evita a acumulação de prefixos

16. Aninhamento
SCSS
nav {
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
}
}
CSS
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
}

17. Operadores
Matemática em seu CSS

18. Operadores
SCSS
p {
$width: 1000px;
width: round(1.5)/2;
height: (500px/2);
margin-left: 5px + 8px * 2;
color: #01020f + #04ff06;
}

19. Mixins
Reuse o seu código

20. Mixins
SCSS
@mixin new-font ($color, $style) {
color: $color;
font-style: $style;
}
.header-text {
@include new-font(red, italic);
}
CSS
.header-text {
color: red;
font-style: italic;
}

21. Funções Nativas

22. Funções Nativas
● lighten($color, 15%);
● darken($color, 15%);
● saturate($color, 15%);
● desaturate($color, 15%);

23. E isso não é tudo

24. Criar suas própria funções

25. Utilizar estruturas de decisão

26. Repita elementos

27. sass-lang.com/guide

28. Obrigado!
megabriel.nunes@gmail.com
fb.com/biellnnunes
@biellnnunes
+GabrielNuness