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
0
170

Future of Preprocessors

Smashing Conference NYC 2016

Avatar for Roy Tomeij

Roy Tomeij

June 14, 2016
Tweet

More Decks by Roy Tomeij

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

Other Decks in Technology

See All in Technology
AI時代の戦略的アーキテクチャ 〜Adaptable AI をアーキテクチャで実現する〜 / Enabling Adaptable AI Through Strategic Architecture
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
15
9.6k
社内外から"使ってもらえる"データ基盤を支えるアーキテクチャの秘訣/登壇資料（飯塚 大地・高橋 一貴）
Avatar for Hacobu hacobu
PRO
0
6.3k
IPv6-mostly field report from RubyKaigi 2026
Avatar for Sorah Fukumori sorah
0
170
マルチドライブアーキテクチャ: 複数の駆動力でプロダクトを前進させる
Avatar for Kenichi SUZUKI knih
0
9.5k
The Complete Android UI Testing Landscape: From Journey to Traditional Approaches
Avatar for Alex Zhukovich alexzhukovich
1
100
スタートアップの事業成長を支えるアーキテクチャとエンジニアリング
Avatar for どら doragt
1
7.1k
AI エージェント活用のベストプラクティスと今後の課題
Avatar for Asei Sugiyama asei
1
240
Service Monitoring Platformについて
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
340
Datadog LLM Observabilityで実現するLLMOps実践事例 / practical-llm-observability-with-datadog
Avatar for 逆井（さかさい） k6s4i53rx
0
120
AWS Media Services 最新サービスアップデート 2025
Avatar for Eiji KOMINAMI / 小南英司 eijikominami
0
110
JJUG CCC 2025 Fall バッチ性能!!劇的ビフォーアフター
Avatar for HayashiYuichiro hayashiyuu1
1
410
AS59105におけるFreeBSD EtherIPの運用と課題
Avatar for t-umeda x86taka
0
270

Featured

See All Featured
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.6k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
527
40k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
514
110k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.2k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.7k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
253
22k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
8
1.1k

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