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

Future of Preprocessors

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
130
What (Not) to Do
Avatar for Roy Tomeij roy
0
110
You and the Big Stage
Avatar for Roy Tomeij roy
0
94
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
430
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
AI駆動開発を通して感じた、 AI時代のデザイナーの役割変化
Avatar for WHIsaiyo whisaiyo
3
2.2k
20260619 私の日常業務での生成 AI 活用
Avatar for Masaru Ogura masaruogura
1
220
RAG を使わないという選択肢
Avatar for tatsutaka tatsutaka
1
250
2026年6月23日 Syncable Tech + Start Python Club にて
Avatar for Kimikazu Kato hamukazu
0
120
Kubernetesにおける学習基盤とLLMOpsの概要
Avatar for ry ry
1
310
Kiroで書いた 設計書 が AI レビューの 採点基準 になる
Avatar for shinji ezaki ezaki
0
120
AIの性能が向上しても未解決な組織の重大問題は何か?/An Unsolved Organizational Problem in the Age of AI
Avatar for moriyuya moriyuya
4
680
不要なレビューをAIにまかせて AIコーディングの環境改善を加速した
Avatar for shoota shoota
1
180
自宅LLMの話
Avatar for Kazuto Kusama jacopen
1
600
あなたの知らないPDFのアクセシビリティ
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
200
LayerX コーポレートエンジニアリング室におけるサプライチェーンセキュリティへの取り組み / Supply Chain Security at LayerX Corporate Engineering
Avatar for Yuya Takeyama yuyatakeyama
2
610
MUSUBI 田中裕一『AIと共に行う「しごとのリデザイン」- スモールバックオフィス編』AI Ops Lab #4
Avatar for MUSUBI musubi
0
210

Featured

See All Featured
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.2k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
230
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.3k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
490
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.2k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
54k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
210k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
107
250k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
410

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