Por que usar pré-processadores CSS?

Palestra ministrada na SCTI-UENF 2014.

Transcript

1. Por que usar pré-
 processadores CSS? Rômulo Machado SCTI-UENF/2014 http://fc04.deviantart.net/fs71/f/2012/232/1/8/minimalist_wallpaper__why_not_zoidberg__by_krukmeister- d5bsep6.jpg
2. romulomachado_ romulomachado romulo.machado5 front-end e rails developer
4. Agenda • Abstração • Como pré-processadores nos ajudam • Convencendo o time • Mudando pro Sass • "Isso não é para mim porque…"
5. ABSTRAÇÃO
6. Live coding, vou criar um site aqui, pera…
7. 10101010101010101010101
 010101010101011111010011010101010 101010101010100010101011101010101 010101001001001000100001010101110 101010101010101010101010101010101 011101010101011010101010101010101 010111010101010101010101010101111 010101010101010101010101010111010 101011011110001010100000000001010 101000010101000101110101010101010 101010101110101010101010101010110 1010111000
8. http://www.joaopessoa.pb.gov.br/portal/wp-content/uploads/2013/04/mallandro-2.jpg
9. 101010 0 1 0 0 1 1 * * * * * * 1 2 4 8 16 32 = = = = = = 0 0 0 32 2 8 42
10. 1000001 A
11. 1000010 B
12. Assembler Instruções
 em texto 01010111010100101010 10101010110101010101 01010101010101010101 01010101010100001101 00110111010101010111 01001010000001001010 10101010110101110101
13. Compilador Instruções
 em texto 01010111010100101010 10101010110101010101 01010101010101010101 01010101010100001101 00110111010101010111 01001010000001001010 10101010110101110101 10101010111010101011
 01010111010101010101 Linguagem
 simbólica
14. Linguagem Simbólica C
15. Nível de abstração 01010111010100101010 10101010110101010101 01010101010101010101 01010101010100001101 00110111010101010111 01001010000001001010 10101010110101110101
16. Nível de abstração MOV CH,24 MOV CL,3
17. Nível de abstração long some_function() { long test1; test1 = another_function(); return test1; } example.c
18. Nível de abstração #include <iostream> int main() { std::cout << Hello, world!; } example.cpp
19. ¯\_(ツ)_/¯ Pra quê essa ladainha? Você não ia falar de web?
20. A INTERNET Decidimos que a coisa mais legal a se fazer era criar documentos interativos.
21. A INTERNET Criamos protocolos para enviar esses documentos (HTTP).
22. A INTERNET Criamos uma linguagem para criar esses documentos (HTML). <h1>Hello, World!</h1>
23. A INTERNET Criamos um software que fala essa linguagem (browsers).
24. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/layers.png http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
25. Rendering Engines Firefox Gecko C++ Chrome Blink C++ Safari WebCore C++ IE Trident C++ Opera Presto/Blink C++
26. JavaScript Engines Firefox SpiderMonkey C++ Chrome V8 C++ Safari JS Core C++ IE Chakra C++ Opera Carakan C++
27. Depois vieram CSS JS
28. Nível de abstração div#logo { background: url(logo.png) no-repeat; background-size: 269px 95px; height: 95px; width: 269px; } example.css
29. Toda vez que o nível de abstração sobe, coisas MAIORES e MELHORES tendem a acontecer.
30. Desenvolver um site é bem mais complicado nos dias de hoje.
31. localStorage app cache acessibilidade index db geolocation <picture> srcset HTML5 semântico orientationchange gestos acelerômetro webGL SVG Canvas segurança Spam Marketing UX APIs REST Responsive Design Performance Testes Design Patterns Controle de Versão
32. Whoooooa! http://f1.thejournal.ie/media/2013/07/mindblown6.gif
33. http://www.holistikyasam.com/wp-content/uploads/2012/12/232-1024x768.jpg
34. Como as possibilidades crescem e a gente pode tirar vantagem delas, a complexidade também cresce.
35. Aumentando o nível de abstração, o nível de complexidade cai.
36. Pré-processamento é uma abstração (Enfim!) 

37. Pré-processamento é uma abstração (Enfim!) E facilita nosso trabalho como web developers.
38. CSS é o último da fila a receber esse tratamento.
39. CSS HTML JS templates,
 includes,
 partials,
 … variáveis,
 loops,
 condicionais,
 funções
 … http://rogovoyreport.com/wp-content/uploads/2014/08/Wiley-Coyote-Help.jpg
40. COMO PRÉ-PROCESSADORES NOS AJUDAM
41. DISCLAIMER: vamos usar Sass, mas qualquer pré-processador que você decidir usar vai facilitar o seu trabalho.
42. .scss .css Local Servidor
43. Sass concatena e comprime seu CSS.
44. .scss .css Local Servidor
45. application.scss @import "reset"; @import "colors"; @import "fonts"; @import "forms"; @import "header";
46. application.css
47. http://i4.minus.com/ieH5rw0zbvt9F.jpg
49. @import "colors"; @import "fonts"; @import "nav-mobile"; m-application.scss @import "colors"; @import "fonts"; @import "nav-desktop"; application.scss
50. Variáveis $brand: #C0FFEE; $link: #36465d; $error: #db4437; $warning: #f4b400; $success: #0f9d58; $spacing: 2em; $baseFontSize: 16px; $baseLineHeight: 1.4; $baseFontFamily: “Helvetica Neue”, Arial;
51. Nesting .container { padding: 20px; } .container a { color: #fff; } .container > h3 { border-bottom: 1px solid gray; } .container ul { list-style: none; }
52. Nesting .container { padding: 20px; a { color: #fff; } > h3 { border-bottom: 1px solid gray; } ul { list-style: none; } }
53. Além de economizar tempo, ajuda no entendimento do código.
54. Media queries .grid-1-4 { width: 25%; @media (max-width: 500px) { width: auto; } }
55. @mixin fonts-body() { font-family: "Gotham", Helvetica; line-height: 1.4; font-weight: 100; color: #333; } body, textarea { @include fonts-body; } Mixins
56. .flipper { @include transition(transform 0.2 ease); &:hover { @include transition(rotate(180deg)); } } Mixins
57. Extend .button { background: $defaultBackgroundColor; color: white; padding: 5px 10px; border-radius: 50%; } .button--big { @extend .button; font-size: 150%; }
58. Toda vez que você for usar um @mixin que não recebe parâmetros, considere usar @extend.
59. Placeholders %clearfix:after { content: ""; display: block; clear: both; border-radius: 50%; } .page-wrap { @extend %clearfix; }
60. CONVENCENDO O TIME
61. http://images.askmen.com/1200x600/video/entertainment-and-celebrities/douchebag-supercut-3-office- space-1092286-TwoByOne.jpg
63. Mah, peraí! Sass simplifica o desenvolvimento e diminui a complexidade do nosso site.
64. Mah, peraí! Mudar pra Sass não é tão custoso assim e pra aprender mesmo, só precisa de uma vez.
65. Mah, peraí! CSS3 é cheio de vendors e é bem fácil de dar mer acontecer alguma coisa que quebre o site em algum browser diferente e são fod difíceis de manter.
66. MUDANDO PRO SASS
67. Todo .css é um .scss válido.
68. style.css > style.scss
69. PROTIP: vá aprendendo e usando as features gradativamente.
70. Substitua todas as #cores por $cores.
71. Aninhe os seletores que se repetem demais.
72. Converta CSS3 para @mixins.
73. Se você sabe CSS, você aprenderá Sass em menos de uma hora.
74. "ISSO NÃO É PRA MIM PORQUE…"
75. "Já tenho um workflow definido, isso aí só vai me complicar."
76. Pode até ser um pouco complicado no começo, mas depois é só alegria.
77. "Se eu mudar pro Sass e não gostar, não tem volta."
78. Sass gera um CSS completo e legível se você quiser.
79. Se você odiar (o que eu duvido), é reversível.
80. "Sass gera um CSS feio"
81. Ele gera exatamente o que você diz para ele gerar.
82. "Quando compilado, as media queries não são agrupadas e o CSS fica repetitivo"
83. "We eat CSS for breakfast, motherf*cker!” http://infocustesting.net/wp-content/uploads/2012/07/browsericons.png
84. "Eu tentei usar pré- processadores num projeto e não gostei"
85. …Said no one ever.
86. "As melhores features do Sass vão ser adicionadas ao CSS em breve"
87. Não espere para usar amanhã o que você pode usar agora.
88. "É mais difícil debugar"
89. Se seus arquivos estão organizados, não.
90. CSS é para máquinas http://i.kinja-img.com/gawker-media/image/upload/s--724aQkla--/c_fit,fl_progressive,q_80,w_320/ jppfwvawgzf7jadb7bfb.gif
91. CSS é legal, mas te faz bem menos produtivo com tanta repetição e baixo nível de abstração. http://i.imgur.com/TAlTwvW.gif
92. Pré-processadores FTW! http://2.bp.blogspot.com/-jNuITNkQrZM/Tte1p4XLamI/AAAAAAAAA6k/3D8isbFjI4s/s640/ tumblr_lnawh3zdY11qaggjuo1_500.gif
93. Perguntas? http://s3-ec.buzzfed.com/static/enhanced/webdr03/2013/6/12/20/anigif_enhanced-buzz-23392-1371082469-2.gif
94. Obrigado! http://replygif.net/i/1095.gif