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
110
You and the Big Stage
Avatar for Roy Tomeij roy
0
97
Make Them Click
Avatar for Roy Tomeij roy
0
320
0 to 80 in 40 Minutes
Avatar for Roy Tomeij roy
2
280
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
型は壁、Rustでもバグを直すな、表現できなくせよ
Avatar for nwiizo nwiizo
13
2k
しぶいSRE: サーバから見えない障害にどう向き合うか。ラストワンマイルのデバッグ実践 / Shibui SRE
Avatar for Hokuto Hoshi kanny
13
6.2k
SREとQA　二人三脚で進めるSLO運用/sre-qa-slo
Avatar for sugitak sugitak
0
590
インフラと開発の垣根を超えていき！〜元AWSインフラエンジニアがAWS開発で奮闘している話〜
Avatar for da-hatakeyama hatahata021
3
190
DatabricksにおけるMCPソリューション
Avatar for Takaaki Yayoi taka_aki
1
250
SRE本の知られざる名シーン / The Hidden Gems of Google SRE Book
Avatar for Narimichi Takamura nari_ex
1
380
ruby.wasmとPicoRuby.wasmに対応した仮想DOMライブラリを作ってる話 #kaigieffect_kaigi
Avatar for sue445 sue445
PRO
0
150
美しいコードを書くためにF#を学んでみた話
Avatar for yud0uhu yud0uhu
1
420
インフラ寄りSREでも 開発に踏み出せる〜境界を越えてユーザー体験に向き合いたい〜
Avatar for SansanTech sansantech
PRO
2
3.9k
Foxgloveについて 実際にExtensionを開発して公開するまでの話 / About Foxglove: The Story of Developing and Releasing an Extension
Avatar for Ryo Kabutan ry0_ka
0
260
CDKで書くECSのベストプラクティス、 改めて考え直す2026 #cdkconf2026
Avatar for maki makies
0
270
キャリアの中で本を作る / Making a Book During Your Career
Avatar for akihisa1210 ak1210
0
140

Featured

See All Featured
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
2
330
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.8k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
390
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
440
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
340
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.5k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
340
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
1
330
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k

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