Sass - css bomba[do]

603 visualizações

Publicada em

Talk feita no FEMUG ABC #5 apresentando o pré-processador Sass. Suas features, vantagens, desvantagens e algumas boas práticas

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

Sem downloads
Visualizações
Visualizações totais
603
No SlideShare
0
A partir de incorporações
0
Número de incorporações
87
Ações
Compartilhamentos
0
Downloads
10
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Sass - css bomba[do]

  1. 1. CSS bomba[do]
  2. 2. WTF am I? Andréa Zambrana front-end @ Amil [multicanais] @akfzambrana http://andreazambrana.com.br
  3. 3. Pré-processadores O que são? O.o
  4. 4. e para nós do front?
  5. 5. [Haml, Jade, Slim, Twig, ...] HTML
  6. 6. JS [CoffeScript, LiveScript, TypeScript, ...]
  7. 7. CSS [Less, Sass, Stylus, ...]
  8. 8. Tá, mas pra que serve?
  9. 9. Fazer mais com menos
  10. 10. BEM, OOCSS, SMACSS, DRY Melhor aplicação de metodologias
  11. 11. OMFG *____* Código escalável e reutilizável
  12. 12. Melhor manutenção
  13. 13. Pré-processadores CSS Agora sim =P
  14. 14. http://lesscss.org/ http://sass-lang.com/ https://learnboost.github.io/stylus/
  15. 15. [CSS-Crush, Myth, Rework, …] E outros menos conhecidos
  16. 16. Dica da titia A melhor ferramenta ou tecnologia é aquela que atende melhor ao seu projeto
  17. 17. Syntactically Awesome Stylesheets Sass
  18. 18. @hcatlin Hampton Catlin
  19. 19. Natalie Weizenbaum @nex3
  20. 20. Chris Eppstein @chriseppstein
  21. 21. Sintaxes Sim, é no plural mesmo =P
  22. 22. .sass
  23. 23. .scss
  24. 24. Sobre a instalação http://sass-lang.com/install
  25. 25. Oh yeah! now we can play! =D Arquivos _partial
  26. 26. vem ni mim! *__* @import
  27. 27. Estrutura de arquivos Architecture for a Sass Project do Hugo Giraudel How to structure a Sass project do John W. Long
  28. 28. Now, cut to the chase!
  29. 29. Variável Variable
  30. 30. Números Incluindo suas unidades (em, px, rem, pt, etc)
  31. 31. utilizando aspas ou não, simples ou duplas Strings
  32. 32. Hexadecimal, nome, rgb, rgba, etc Cores
  33. 33. true / false Booleanos
  34. 34. $nome: valor; Sintaxe
  35. 35. O bom, o mau e o feio Nem tudo é branco e preto
  36. 36. Manutenção < esforço > velocidade
  37. 37. Desenvolvimento > velocidade < esforço para lembrar > padronização
  38. 38. Customização > possibilidades > esforço < velocidade
  39. 39. Show me the code!!!
  40. 40. cssscss
  41. 41. Nesting Aninhamento
  42. 42. Boring...
  43. 43. Questão de paternindade Who is your daddy?!
  44. 44. .pai { .filho { … } .irmao { .neto { … } } } Sintaxe
  45. 45. O bom, o mau e o muito feio Tenha cuidado pequeno gafanhoto O.o
  46. 46. Manutenção < esforço > leitura
  47. 47. Desenvolvimento < esforço > organização > velocidade
  48. 48. cuidado!cuidado!
  49. 49. Um pouco de código
  50. 50. scss css
  51. 51. Não está tão ruim Mas pode melhorar
  52. 52. cssscss
  53. 53. Boa prática O próximo front pode ser um serial killer =P
  54. 54. Se tiver “bisnetos”, seu código ta ficando podre ¬¬’ Dois é bom, três é demais
  55. 55. Seu lindo *___* Mixin
  56. 56. @mixin nome(argumento) { propriedades, regras, etc } Sintaxe
  57. 57. E como usa? Quero ver código!
  58. 58. cssscss
  59. 59. O bom, o mau e o feio Nem tudo é cor de rosa
  60. 60. > velocidade > organização > reciclagem / reutilização > padronização Desenvolvimento
  61. 61. < performance > esforço Desenvolvimento
  62. 62. > facilidade > velocidade > danos colaterais Manutenção
  63. 63. with power comes great responsibility... Boa prática
  64. 64. Então não é mixin Se não recebe argumentos
  65. 65. Herança de seletores @extend
  66. 66. Concatenação, use com moderação =] Classes
  67. 67. @extend .nome-classe; Sintaxe
  68. 68. Exemplo?
  69. 69. scss css
  70. 70. Place... what? Placeholder selector
  71. 71. Imagina que é uma classe
  72. 72. %nome-do-placeholder { propriedades, regras, etc } Sintaxe
  73. 73. Mas, pra que preciso de uma classe que “não é uma classe”? Entendi...
  74. 74. Não é compilado
  75. 75. Separa um lugar
  76. 76. E como funciona? Bora pro código!
  77. 77. scss css
  78. 78. O bom, o bomzão e o difícil Que a força esteja conosco!
  79. 79. > velocidade < esforço > padronização Desenvolvimento
  80. 80. > componentização > uso de qualquer metodologia CSS > efeitos colaterais Desenvolvimento
  81. 81. > prático > fácil < e > esforço Manutenção
  82. 82. > leitura > organização Manutenção
  83. 83. Sim e não =/ OMG so tem coisa boa!
  84. 84. Literalmente, separa um lugar... !important venha cá, que vou lhe usar
  85. 85. scss css
  86. 86. This is a real problem :( Media querie
  87. 87. scss console
  88. 88. cssscss
  89. 89. Operadores
  90. 90. + - * / % Matemáticos
  91. 91. scss css
  92. 92. cssscss
  93. 93. and or not Booleanos
  94. 94. Yeah baby!! m/ Estruturas de controle
  95. 95. @if
  96. 96. @if condição { … } @else if condição { … } @else { … } Sintaxe
  97. 97. @for
  98. 98. @for variável from inicio through fim { propriedades, regras, etc } Sintaxe
  99. 99. @each
  100. 100. @each variavel in lista/mapa { propriedades, regras, etc } Sintaxe
  101. 101. @while
  102. 102. Sintaxe @while condição { propriedades, regras, etc. }
  103. 103. Really? *.* Funções
  104. 104. São muitas e muito legais =D http://sass-lang.com/documentation/file.SASS_REFERENCE.html#functions Nativas
  105. 105. Agora o “bagulho fica loko” Customizadas
  106. 106. Só que bombados São como mixins
  107. 107. @return
  108. 108. @function nome(argumento){ propriedades, regras, etc @return valor; } Sintaxe
  109. 109. Não tem coisa ruim, serio! O bom, o bomzão e o melhor
  110. 110. > velocidade > dinámico > lógica complexa Desenvolvimento
  111. 111. O céu é o limite Seja feliz!
  112. 112. Maps Mapas
  113. 113. chave: valor É uma lista super-poderosa
  114. 114. $map: ( chave: valor, outra-chave: valor ); Sintaxe
  115. 115. Legal ne? só que essa é outra talk ;P
  116. 116. Para estudo The Sass way - Blog http://thesassway.com/ Hugo Giraudel - Blog http://hugogiraudel.com/blog/ Curso de Loiane Groner - Canal Youtube https://www.youtube.com/playlist? list=PL3C05B7A66AC502CF
  117. 117. Referências http://sass-lang.com/ http://alexplaza.co/scss/sass/preprocessors/2014/07/05/Porque-usar-un-preprocesador- de-css/ https://en.wikipedia.org/wiki/Sass_(stylesheet_language) https://es.wikipedia.org/wiki/Sass_(lenguaje_de_hojas_de_estilo) http://www.sitepoint.com/architecture-sass-project/ http://cssguidelin.es/ http://slides.com/ridjohansen/gdb-2013_css-reciclavel-com-o-uso-de-metodologias#/ http://pt.slideshare.net/loumontano/sass-conferencia-csssp
  118. 118. Obrigada!FEMUG ABC #5 @akfzambrana | http://andreazambrana.com.br

×