Por que usar pré-processadores CSS?

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

3. None

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

48. None

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

62. None

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