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
150

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
110
What (Not) to Do
Avatar for Roy Tomeij roy
0
87
You and the Big Stage
Avatar for Roy Tomeij roy
0
61
Make Them Click
Avatar for Roy Tomeij roy
0
280
0 to 80 in 40 Minutes
Avatar for Roy Tomeij roy
2
230
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
370
Front-End: Fun, Not Frustration
Avatar for Roy Tomeij roy
1
1.1k
Sass in the Real World
Avatar for Roy Tomeij roy
2
510

Other Decks in Technology

See All in Technology
Next.jsと状態管理のプラクティス
Avatar for uhyo uhyo
5
2.1k
Tailwind CSS の小話「コンテナークエリーって便利」
Avatar for Yuki Yamada yamaday
0
110
Как мы автоматизировали интеграционное тестирование с Gonkey и не пожалели. Паша Егорычев, Кирилл Поляков
Avatar for Lamoda Tech lamodatech
0
2.1k
"発信文化"をどうやって計測する？技術広報のKPI探索記/How do we measure communication culture?
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
3
280
ペアーズにおける評価ドリブンな AI Agent 開発のご紹介
Avatar for fukubaka0825 fukubaka0825
9
2.6k
経済メディア編集部の実務に小さく刺さるAI / small-ai-with-editorial
Avatar for Yukiya Nakagawa nkzn
2
390
Асинхронная коммуникация в Go: от понятного к душному. Дима Некрасов, Otello, 2ГИС
Avatar for Lamoda Tech lamodatech
0
2.1k
テストコードにはテストの意図を込めよう(2025年版) #retechtalk / Put the intent of the test 2025
Avatar for nihonbuson nihonbuson
PRO
6
1k
既存の開発資産を活かしながら、 《新規開発コスト抑制》と《開発体験向上》 を両立する拡張アーキテクチャ事例
Avatar for kubell kubell_hr
0
140
製造業向けIoTソリューション提案資料.pdf
Avatar for h.uriu haruki_uiru
0
250
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
7
64k
Google Cloud Next 2025 Recap アプリケーション開発を加速する機能アップデート / Application development-related features of Google Cloud
Avatar for turbofish ryokotmng
0
180

Featured

See All Featured
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.2k
Building an army of robots
Avatar for Kyle Neath kneath
305
45k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
5
570
Code Review Best Practice
Avatar for Trisha Gee trishagee
68
18k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
52
7.6k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.7k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
81
9k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
298
20k
It's Worth the Effort
Avatar for 3n 3n
184
28k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
75
5.8k

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