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

Future of Preprocessors

Roy Tomeij
June 14, 2016
Technology
0
130

Future of Preprocessors

Smashing Conference NYC 2016

Roy Tomeij

June 14, 2016
Tweet

More Decks by Roy Tomeij

See All by Roy Tomeij
Empathy through Acting
roy
1
90
What (Not) to Do
roy
0
75
You and the Big Stage
roy
0
38
Make Them Click
roy
0
190
0 to 80 in 40 Minutes
roy
2
180
The Future of CSS Isn't CSS
roy
5
830
Sass: With Great Power Comes Great Responsibility
roy
0
290
Front-End: Fun, Not Frustration
roy
1
1k
Sass in the Real World
roy
2
500

Other Decks in Technology

See All in Technology
頻度主義統計学を「完全に理解」しよう
ueniki
1
160
DocC Documentation Archiveをアプリ開発で活用してみよう / DocC Documentation Archive for iOS Application
aomathwift
0
110
重新想像：如何做技術選型決策 / Rethinking : Technical Decision
yftzeng
2
280
DevOpsDays Taipei 2022 Opening
cheng_wei_chen
3
920
SAP Community and Developer Update
sygyzmundovych
0
210
TokyoR#101 パーマーステーションのペンギンたち2 データクリーニング編
bob3bob3
1
300
Roslyn とその活用法
nenonaninu
2
280
Migrating to Compose | DevFest Bangalore 2022
rivuchk
0
270
n8nでワークフローを自動化した話 / 20220914_n8n
yug1224
1
780
マトリクス型組織の導入後の変化を定量的に捉える
hagevvashi
0
230
All About Regular Expressions
jadeallenx
1
110
IIJmio meeting 33 IIJmio Updates
iij_techlog
0
3.1k

Featured

See All Featured
What’s in a name? Adding method to the madness
productmarketing
11
1.7k
How to name files
jennybc
44
66k
A Tale of Four Properties
chriscoyier
149
21k
A designer walks into a library…
pauljervisheath
197
16k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.2k
KATA
mclloyd
7
9k
The Pragmatic Product Professional
lauravandoore
19
3.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
6
2.8k
Gamification - CAS2011
davidbonilla
75
4k
Atom: Resistance is Futile
akmur
255
23k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
499
130k
It's Worth the Effort
3n
173
26k

Transcript

  1. The Future of Preprocessors

  2. @Roy

  3. None
  4. None

  5. 2 0 0 6

  6. None
  7. None
  8. None

  9. 0607080910111213141516

  10. 0607080910111213141516 Made CSS Great Again

  11. 0607080910111213141516

  12. 0607080910111213141516

  13. 0607080910111213141516

  14. 0607080910111213141516

  15. 0607080910111213141516

  16. 0607080910111213141516

  17. how about css features?

  18. 0607080910111213141516 CSS Animations Proposed

  19. 0607080910111213141516 CSS Animations -webkit- in Chrome

  20. 0607080910111213141516 CSS Animations in Internet Explorer

  21. 0607080910111213141516 CSS Animations without -webkit-

  22. 0607080910111213141516 CSS Animations still Working Draft

  23. why so long?

  24. None

  25. Idea

  26. Write Editor's Draft

  27. Browsers may experiment with implementing

  28. Write Working Draft

  29. Browsers start implementing

  30. Candidate Recommendation

  31. Two correct, independent implementations

  32. Recommendation

  33. None

  34. Idea

  35. Natalie approves

  36. It's implemented

  37. Works in all browsers

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

  39. CSS is catching up

  40. calc(100% - 80px)

  41. Custom Properties

  42. None

  43. Sass > CSS CSS > Sass

  44. #languagedesign

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

  46. No more preprocessors

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

    ...

  48. Programming in your CSS

  49. CSS is a machine language

  50. Creativity > Repetition

  51. Configuration > Search & replace

  52. Fun > Frustration

  53. Sass is great for non-developers too

  54. Don't overdo it

  55. The following code was copy & pasted by trained monkeys.

    Do not try this at home.
  56. None