A apresentação introduz o Sass, um pré-processador CSS, e seus principais recursos como variáveis, mixins, nesting, imports, extends, operações matemáticas e controle de diretivas. O palestrante também apresenta suas credenciais e contatos.

1. Globalcode – Open4education
Trilha Web – Sass: CSS com super-poderes
Rodrigo Amora
rodrigo.amora.freitas@gmail.com
@RodrigoAmora

2. Globalcode – Open4education
Quem sou eu
Rodrigo Amora
Sou formado em Sistemas de Informação pela
Unigranrio.
Sou Desenvolvedor Web desde 2009.
Sou Desenvolvedor Mobile desde 2011.

3. Globalcode – Open4education
Sócio e Dev
www.boxes-list.com

4. Globalcode – Open4education
Contatos
rodrigo.amora.freitas@gmail.com
@RodrigoAmora

5. Globalcode – Open4education
Agenda
Tipos de Dados
Variáveis
Mixin
Nesting
Imports
Extends
Operações
Controles de Diretivas e Expressões
Darken
Lithen

6. Globalcode – Open4education
Sass
Sass é um pré-processador CSS, criado com
intuito de facilitar a criação e manutenção de
arquivos CSS;
Versão atual 3.4.22;
Foi feito em Ruby;

7. Globalcode – Open4education
Instalação no Linux e MacOS
gem install sass

8. Globalcode – Open4education
Instalação no Windows
Toasty!!!
Troque de S.O

9. Globalcode – Open4education
Instalação no Windows
Baixar e executar o instalador o Ruby através do
site: http://rubyinstaller.org/
Colocar o diretório do Ruby no path;
Executar o comando: gem install sass;

10. Globalcode – Open4education
O Sass trabalha com arquivos .scss e os converte
para arquivos .css normal

11. Globalcode – Open4education
Tipos de Dados
O Sass trabalha os seguintes tipos de dados:
Números (ex: 1.2, 13, 10px);
Strings;
Colors: blue, #04a3f9, rgba(255, 0, 0, 0.5);
Boolean;
Null;
Listas de valores separados por espaço ou
vírgula;
Maps (ex: (key1: value1, key2: value2) )

12. Globalcode – Open4education
Variáveis
Variáveis no Sass possuem o mesmo conceito da
programação back-end e JS, ou seja serve para
guarda valores;

13. Globalcode – Open4education
Variáveis
a {
color: #fff;
}
.div {
color: #fff;
background-color: grey;
border: 1px solid blue;
border-radius: 5px;
}

14. Globalcode – Open4education
Variáveis
$cor-branca: #fff;
a {
color: $cor-branca;
}
.div {
color: $cor-branca;
background-color: grey;
border: 1px solid blue;
border-radius: 5px;
}

15. Globalcode – Open4education
Variáveis
$cor-branca: #fff;
$borda-azul: 1px solid blue;
.div {
background-color: grey;
border: $borda-azul;
border-radius: 5px;
color: $cor-branca;
}

16. Globalcode – Open4education
sass estilos.scss:estilos.css
Arquivo usado pelo Sass Arquivo gerado pelo Sass

17. Globalcode – Open4education
Mais eu vou ter que executar esse comando para
toda alteração que eu fizer?

18. Globalcode – Open4education
sass --watch estilos.scss:estilos.css

19. Globalcode – Open4education
Mixin
Usado para guardar trechos de código CSS
repetidos;
É chamado através da diretiva @include;

20. Globalcode – Open4education
Mixin
@mixin meu_mixin {
-webkit-border-radius: $radius;
border-radius: $radius;
}
.minha_classe {
@include meu_mixin;
}

21. Globalcode – Open4education
Mixin
@mixin meu_mixin($radius: 0.3em) {
-webkit-border-radius: $radius;
border-radius: $radius;
}
.minha_classe {
@include meu_mixin(2px);
}

22. Globalcode – Open4education
Nesting
Recurso do Sass para aninhar propriedades do
CSS;

23. Globalcode – Open4education
Nesting
.minha_classe {
a {
color: red;
}
p {
background-color: blue;
}
}

24. Globalcode – Open4education
Nesting
.minha_classe {
}
.minha_classe a {
color: red
}
.minha_classe p {
background-color: blue;
}

25. Globalcode – Open4education
@import
Serve para importar arquivos dentro de outros
arquivos;
Funciona da mesma forma que a função include do
PHP e require do JS;

26. Globalcode – Open4education
@import
@import "header.scss";
@import "body.scss";
@import "footer.scss";

27. Globalcode – Open4education
@import
Também pode usar sem a extensão
@import "header";
@import "body";
@import "footer";

28. Globalcode – Open4education
@extend
Este é um dos recursos mais úteis do Sass.
@extend permite herdar as propriedades de uma
classe ou seletor. Ela ajuda a manter o seu .scss
mais simples.
Tem o mesmo conceito de Herança da Orientação
a Objetos;

29. Globalcode – Open4education
@extend
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}

30. Globalcode – Open4education
Interpolation
É recurso que permite encaixar valores dentro de
outros valores;
Usado através do simbolo #{}

31. Globalcode – Open4education
Interpolation
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
p.foo {
border-color: blue;
}

32. Globalcode – Open4education
@warn
A directiva @warn imprime o valor de uma
expressão do Sass para o fluxo de saída de erro
padrão.
@warn "Assuming #{$x} to be in pixels";

33. Globalcode – Open4education
@debug
Tem a mesma função do @warn, só que em modo
debug.
@debug 10em + 12em;

34. Globalcode – Open4education
@error
Tem o mesmo objetivo de @warn, só que imprime
mensagens quando acontece algum erro;
@error “mensagem….”;

35. Globalcode – Open4education
Operações
O Sass tem suporte as operações matemáticas
básicas (soma, subtração, divisão e multiplicação);

36. Globalcode – Open4education
Operações - Soma
.minha_classe {
width: 600px + 960px;
}

37. Globalcode – Open4education
Operações - Subtração
.minha_classe {
width: 600px - 960px;
}

38. Globalcode – Open4education
Operações - Multiplicação
.minha_classe {
width: 960px * 100%;
}

39. Globalcode – Open4education
Operações - Divisão
.minha_classe {
width: 600px / 960px * 100%;
}

40. Globalcode – Open4education
Controle de Diretivas e
Expressões
O Sass também tem suporte a Controle de
Diretivas e Expressões Regulares com as funções:
@if, @for, @each e @while;

41. Globalcode – Open4education
@if
if(true, 1px, 2px) => 1px

42. Globalcode – Open4education
@if
@Mixin meu_mixi($radius) {
@if $radius > 5 {
//Implementação
}
}

43. Globalcode – Open4education
@while
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}

44. Globalcode – Open4education
@for
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}

45. Globalcode – Open4education
@each
@each $animal in tigre, cachorro, elefante, girafa {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}

46. Globalcode – Open4education
Darken
Função do Sass para deixar a cor mais escura;
Sintaxe:
darken(cor, porcentagem); -> darken(#0000FF, 20%);

47. Globalcode – Open4education
Lighten
Função do Sass para deixar a cor mais clara;
Sintaxe:
lighten(cor, porcentagem); -> lighten(#0000FF, 20%);

48. Globalcode – Open4education
Referência
http://sass-lang.com

49. Globalcode – Open4education
Obrigado!
E-mail: rodrigo.amora.freitas@gmail.com
Twitter: @RodrigoAmora