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

Future of Preprocessors

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Roy Tomeij Roy Tomeij
June 14, 2016
Technology
0
180

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
130
What (Not) to Do
Avatar for Roy Tomeij roy
0
99
You and the Big Stage
Avatar for Roy Tomeij roy
0
84
Make Them Click
Avatar for Roy Tomeij roy
0
310
0 to 80 in 40 Minutes
Avatar for Roy Tomeij roy
2
260
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
400
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
KubeCon + CloudNativeCon NA ‘25 Recap, Extensibility: Gateway API / NRI
Avatar for Aya (Igarashi) Ozawa ladicle
0
120
AWS Devops Agent ~ 自動調査とSlack統合をやってみた！ ~
Avatar for Kubo kubomasataka
2
200
EventBridge API Destination × AgentCore Runtimeで実現するLambdaレスなイベント駆動エージェント
Avatar for Har1101 har1101
7
260
新規事業 toitta におけるAI 機能評価の話 / AI Feature Evaluation in toitta
Avatar for pokutuna pokutuna
0
270
Security Hub と出会ってから 1年半が過ぎました
Avatar for rch850 rch850
0
180
人はいかにして 確率的な挙動を 受け入れていくのか
Avatar for vaaaaanquish vaaaaanquish
4
2.5k
CodeRabbit CLI + Claude Codeの連携について
Avatar for Oikon oikon48
1
640
Agentic Coding 実践ワークショップ
Avatar for watany watany
40
27k
「全社導入」は結果。1人の熱狂が組織に伝播したmikanのn8n活用
Avatar for Sota Mikami sota_mikami
0
470
Riverpod3.xで実現する実践的UI実装
Avatar for Fumiya Sakai fumiyasac0921
2
340
現場で活かす生成AI実践セミナー「広報×AI活用」編
Avatar for Yasuhiro Matsuda matyuda
0
100
【Oracle Cloud ウェビナー】ランサムウェアが突く「侵入の隙」とバックアップの「死角」 ～ 過去の教訓に学ぶ — 侵入前提の防御とデータ保護 ～
Avatar for oracle4engineer oracle4engineer
PRO
2
220

Featured

See All Featured
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
120
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
170
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.5k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
190
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.1k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
0
130
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.7k
Claude Code のすすめ
Avatar for schroneko schroneko
67
210k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k

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