TDC 2016 - Sass: CSS com super-poderes.

239 visualizações

Publicada em

Slides da minha palestra no TDC 2016 sobre Sass.

Publicada em: Internet
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
239
No SlideShare
0
A partir de incorporações
0
Número de incorporações
12
Ações
Compartilhamentos
0
Downloads
6
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

TDC 2016 - Sass: CSS com super-poderes.

  1. 1. Globalcode – Open4education Trilha Web – Sass: CSS com super-poderes Rodrigo Amora rodrigo.amora.freitas@gmail.com @RodrigoAmora
  2. 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. 3. Globalcode – Open4education Sócio e Dev www.boxes-list.com
  4. 4. Globalcode – Open4education Contatos rodrigo.amora.freitas@gmail.com @RodrigoAmora
  5. 5. Globalcode – Open4education Agenda Tipos de Dados Variáveis Mixin Nesting Imports Extends Operações Controles de Diretivas e Expressões Darken Lithen
  6. 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. 7. Globalcode – Open4education Instalação no Linux e MacOS gem install sass
  8. 8. Globalcode – Open4education Instalação no Windows Toasty!!! Troque de S.O
  9. 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. 10. Globalcode – Open4education O Sass trabalha com arquivos .scss e os converte para arquivos .css normal
  11. 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. 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. 13. Globalcode – Open4education Variáveis a { color: #fff; } .div { color: #fff; background-color: grey; border: 1px solid blue; border-radius: 5px; }
  14. 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. 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. 16. Globalcode – Open4education sass estilos.scss:estilos.css Arquivo usado pelo Sass Arquivo gerado pelo Sass
  17. 17. Globalcode – Open4education Mais eu vou ter que executar esse comando para toda alteração que eu fizer?
  18. 18. Globalcode – Open4education sass --watch estilos.scss:estilos.css
  19. 19. Globalcode – Open4education Mixin Usado para guardar trechos de código CSS repetidos; É chamado através da diretiva @include;
  20. 20. Globalcode – Open4education Mixin @mixin meu_mixin { -webkit-border-radius: $radius; border-radius: $radius; } .minha_classe { @include meu_mixin; }
  21. 21. Globalcode – Open4education Mixin @mixin meu_mixin($radius: 0.3em) { -webkit-border-radius: $radius; border-radius: $radius; } .minha_classe { @include meu_mixin(2px); }
  22. 22. Globalcode – Open4education Nesting Recurso do Sass para aninhar propriedades do CSS;
  23. 23. Globalcode – Open4education Nesting .minha_classe { a { color: red; } p { background-color: blue; } }
  24. 24. Globalcode – Open4education Nesting .minha_classe { } .minha_classe a { color: red } .minha_classe p { background-color: blue; }
  25. 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. 26. Globalcode – Open4education @import @import "header.scss"; @import "body.scss"; @import "footer.scss";
  27. 27. Globalcode – Open4education @import Também pode usar sem a extensão @import "header"; @import "body"; @import "footer";
  28. 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. 29. Globalcode – Open4education @extend .message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; }
  30. 30. Globalcode – Open4education Interpolation É recurso que permite encaixar valores dentro de outros valores; Usado através do simbolo #{}
  31. 31. Globalcode – Open4education Interpolation $name: foo; $attr: border; p.#{$name} { #{$attr}-color: blue; } p.foo { border-color: blue; }
  32. 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. 33. Globalcode – Open4education @debug Tem a mesma função do @warn, só que em modo debug. @debug 10em + 12em;
  34. 34. Globalcode – Open4education @error Tem o mesmo objetivo de @warn, só que imprime mensagens quando acontece algum erro; @error “mensagem….”;
  35. 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. 36. Globalcode – Open4education Operações - Soma .minha_classe { width: 600px + 960px; }
  37. 37. Globalcode – Open4education Operações - Subtração .minha_classe { width: 600px - 960px; }
  38. 38. Globalcode – Open4education Operações - Multiplicação .minha_classe { width: 960px * 100%; }
  39. 39. Globalcode – Open4education Operações - Divisão .minha_classe { width: 600px / 960px * 100%; }
  40. 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. 41. Globalcode – Open4education @if if(true, 1px, 2px) => 1px
  42. 42. Globalcode – Open4education @if @Mixin meu_mixi($radius) { @if $radius > 5 { //Implementação } }
  43. 43. Globalcode – Open4education @while $i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; }
  44. 44. Globalcode – Open4education @for @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }
  45. 45. Globalcode – Open4education @each @each $animal in tigre, cachorro, elefante, girafa { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } }
  46. 46. Globalcode – Open4education Darken Função do Sass para deixar a cor mais escura; Sintaxe: darken(cor, porcentagem); -> darken(#0000FF, 20%);
  47. 47. Globalcode – Open4education Lighten Função do Sass para deixar a cor mais clara; Sintaxe: lighten(cor, porcentagem); -> lighten(#0000FF, 20%);
  48. 48. Globalcode – Open4education Referência http://sass-lang.com
  49. 49. Globalcode – Open4education Obrigado! E-mail: rodrigo.amora.freitas@gmail.com Twitter: @RodrigoAmora

×