Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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
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
150
What (Not) to Do
Avatar for Roy Tomeij roy
0
120
You and the Big Stage
Avatar for Roy Tomeij roy
0
100
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
540

Other Decks in Technology

See All in Technology
深夜のクラウド懺悔室 1:29:300 or 1:0:0
Avatar for kazzpapa3 kazzpapa3
1
230
全員がプロダクトへ向き合う組織を持続成長させるために——組織づくりのフライホイールと4象限 / The Flywheel Model and Four Quadrants for Organizational Design
Avatar for hiro-torii hiro_torii
4
960
OpenTelemetry eBPF Instrumentationの舞台裏 / Behind the Scenes of OpenTelemetry eBPF Instrumentation
Avatar for ymotongpoo ymotongpoo
3
990
ペアプロの価値はコードを書くことだけじゃない
Avatar for コドモン開発チーム codmoninc
PRO
0
170
なぜSRE・セキュリティは評価されないのか？守りの組織を事業成長エンジンに変えた実践
Avatar for サイバーセキュリティクラウド cscengineer
PRO
3
2.5k
When Does a Local Qwen Start to Break
Avatar for Shoto morshoto
0
200
DEFCON_CHV_CTF_Write-up.pdf
Avatar for bata_24 bata_24
0
140
GoにおけるFFIのこれまでとこれから
Avatar for Masaaki Goshima goccy
5
2.4k
研究開発部の紹介 / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
4
25k
KPIだけでは評価できないプロダクトが考えるべき Evalsという第二の評価系 / Beyond KPIs: Evals as a Second Evaluation Framework for Products #PdEConf
Avatar for Aki / @LoveIdahoBurger aki_iinuma
4
3.9k
2026_devsumi_ozono.pdf
Avatar for O3(ozono) o3
2
350
アリアドネの糸と、20年ごとの建て替え ── 長尾真『電子図書館』を、伊勢で読み直す / Rereading Makoto Nagao’s "Electronic Library" in Ise
Avatar for Kiyota Yoji, Ph.D. ykiyota
0
150

Featured

See All Featured
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.9k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.4k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.3k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
600
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.6k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
800
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
660
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
22k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
820
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
290

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