Future of Preprocessors

Smashing Conference NYC 2016

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. View Slide

10. 0607080910111213141516
    Made CSS
    Great Again
    

    View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. 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