Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Future of Preprocessors

Future of Preprocessors

Smashing Conference NYC 2016

Roy Tomeij

June 14, 2016
Tweet

More Decks by Roy Tomeij

Other Decks in Technology

Transcript

  1. The Future
    of
    Preprocessors

    View Slide

  2. @Roy

    View Slide

  3. View Slide

  4. View Slide

  5. 2 0 0 6

    View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. 0607080910111213141516

    View Slide

  10. 0607080910111213141516
    Made CSS
    Great Again

    View Slide


  11. 0607080910111213141516

    View Slide

  12. 0607080910111213141516

    View Slide

  13. 0607080910111213141516

    View Slide

  14. 0607080910111213141516

    View Slide

  15. 0607080910111213141516

    View Slide

  16. 0607080910111213141516

    View Slide

  17. how about
    css features?

    View Slide

  18. 0607080910111213141516
    CSS Animations
    Proposed

    View Slide

  19. 0607080910111213141516
    CSS Animations
    -webkit- in Chrome

    View Slide

  20. 0607080910111213141516
    CSS Animations
    in Internet Explorer

    View Slide

  21. 0607080910111213141516
    CSS Animations
    without -webkit-

    View Slide

  22. 0607080910111213141516
    CSS Animations
    still Working Draft

    View Slide

  23. why so long?

    View Slide

  24. View Slide

  25. Idea

    View Slide

  26. Write Editor's Draft

    View Slide

  27. Browsers may
    experiment with
    implementing

    View Slide

  28. Write Working Draft

    View Slide

  29. Browsers start
    implementing

    View Slide

  30. Candidate
    Recommendation

    View Slide

  31. Two correct,
    independent
    implementations

    View Slide

  32. Recommendation

    View Slide

  33. View Slide

  34. Idea

    View Slide

  35. Natalie approves

    View Slide

  36. It's implemented

    View Slide

  37. Works in
    all browsers

    View Slide

  38. Sass gave us
    the featureS we
    needeD. Fast.

    View Slide

  39. CSS is
    catching up

    View Slide

  40. calc(100% - 80px)

    View Slide

  41. Custom Properties

    View Slide

  42. View Slide

  43. Sass > CSS
    CSS > Sass

    View Slide

  44. #languagedesign

    View Slide

  45. @if media(...) {
    ...
    }

    View Slide

  46. No more
    preprocessors

    View Slide

  47. Variables, nesting,
    placeholders, extend,
    mixins, functions,
    control structures,
    lists/maps, math, ...

    View Slide

  48. Programming
    in your CSS

    View Slide

  49. CSS is a
    machine language

    View Slide

  50. Creativity >
    Repetition

    View Slide

  51. Configuration >
    Search & replace

    View Slide

  52. Fun > Frustration

    View Slide

  53. Sass is great for
    non-developers too

    View Slide

  54. Don't overdo it

    View Slide

  55. The following code
    was copy & pasted
    by trained monkeys.
    Do not try this at
    home.

    View Slide

  56. View Slide