Pro Yearly is on sale from $80 to $50! »

Por que usar pré-processadores CSS?

Por que usar pré-processadores CSS?

Palestra ministrada na SCTI-UENF 2014.

2b885435d6a7b8bf6db3f8022a266311?s=128

Rômulo Machado

November 06, 2014
Tweet

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