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

Future of Preprocessors

Avatar for Roy Tomeij Roy Tomeij
June 14, 2016
Technology
190
0

Future of Preprocessors

Smashing Conference NYC 2016

Avatar for Roy Tomeij

Roy Tomeij

June 14, 2016

More Decks by Roy Tomeij

See All by Roy Tomeij
Empathy through Acting
Avatar for Roy Tomeij roy
1
140
What (Not) to Do
Avatar for Roy Tomeij roy
0
120
You and the Big Stage
Avatar for Roy Tomeij roy
0
99
Make Them Click
Avatar for Roy Tomeij roy
0
320
0 to 80 in 40 Minutes
Avatar for Roy Tomeij roy
2
290
The Future of CSS Isn't CSS
Avatar for Roy Tomeij roy
5
1.2k
Sass: With Great Power Comes Great Responsibility
Avatar for Roy Tomeij roy
0
440
Front-End: Fun, Not Frustration
Avatar for Roy Tomeij roy
1
1.1k
Sass in the Real World
Avatar for Roy Tomeij roy
2
530

Other Decks in Technology

See All in Technology
[MIRU26] To What Extent Does MLLM-as-a-Judge Exhibit Cross-Model Preference Bias?
Avatar for Semantic Machine Intelligence Lab., Keio Univ. keio_smilab
PRO
0
180
【CEDEC2026】コードレビュー支援ツール開発から学ぶ：LLMを用いた業務システムの実践的な運用設計と誤出力対策
Avatar for Cygames, Inc. cygames
PRO
0
300
[しろおび夏祭り2026] チャットするAIから、作業するAIへ - 使われ方の変化と、その裏側で起きていること
Avatar for kk0n kk0n
0
1.3k
AIで楽になるはずが、なぜ疲れる？
Avatar for kinopee kinopeee
0
150
AIは実装を速くする。では、私たちは何を今作るべきか？－立場を越えてリリースに向き合ったチーム開発の実践 / 20260801 Hiromi Nakaya and Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
3
290
PLaMo 3.0 Primeの構造化出力サポート
Avatar for Preferred Networks pfn
PRO
0
170
初めてのGitHub Actions / GitHub Actions at First
Avatar for philomagi tooppoo
0
120
AIツールを導入しても生産性はあがらない？ カオナビが直面した 3つの壁と乗り越え方。/ Overcoming 3 Barriers to AI-Driven Productivity at kaonavi
Avatar for 株式会社カオナビ kaonavi
0
1.6k
AIがAPIを書く時代に、私たちは何を設計すべきか
Avatar for 草薙昭彦 nagix
0
200
SmartHR Engineering Team Deck
Avatar for SmartHR Recruit smarthr
0
120
Amazon Bedrock Managed Knowledge Base Dive Deep
Avatar for Renya Kujirada ren8k
0
340
脱Jenkins、インターン生が挑んだCIツールGitHubActions移行
Avatar for MIXI ENGINEERS mixi_engineers
PRO
1
310

Featured

See All Featured
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
940
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
1.2k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
7k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
230
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
360
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
330
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
760
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k

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