Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Future of Preprocessors
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Roy Tomeij
June 14, 2016
Technology
0
180
Future of Preprocessors
Smashing Conference NYC 2016
Roy Tomeij
June 14, 2016
Tweet
Share
More Decks by Roy Tomeij
See All by Roy Tomeij
Empathy through Acting
roy
1
130
What (Not) to Do
roy
0
99
You and the Big Stage
roy
0
84
Make Them Click
roy
0
310
0 to 80 in 40 Minutes
roy
2
260
The Future of CSS Isn't CSS
roy
5
1.2k
Sass: With Great Power Comes Great Responsibility
roy
0
400
Front-End: Fun, Not Frustration
roy
1
1.1k
Sass in the Real World
roy
2
520
Other Decks in Technology
See All in Technology
KubeCon + CloudNativeCon NA ‘25 Recap, Extensibility: Gateway API / NRI
ladicle
0
120
AWS Devops Agent ~ 自動調査とSlack統合をやってみた! ~
kubomasataka
2
200
EventBridge API Destination × AgentCore Runtimeで実現するLambdaレスなイベント駆動エージェント
har1101
7
260
新規事業 toitta におけるAI 機能評価の話 / AI Feature Evaluation in toitta
pokutuna
0
270
Security Hub と出会ってから 1年半が過ぎました
rch850
0
180
人はいかにして 確率的な挙動を 受け入れていくのか
vaaaaanquish
4
2.5k
CodeRabbit CLI + Claude Codeの連携について
oikon48
1
640
Agentic Coding 実践ワークショップ
watany
40
27k
「全社導入」は結果。1人の熱狂が組織に伝播したmikanのn8n活用
sota_mikami
0
470
Riverpod3.xで実現する実践的UI実装
fumiyasac0921
2
340
現場で活かす生成AI実践セミナー「広報×AI活用」編
matyuda
0
100
【Oracle Cloud ウェビナー】ランサムウェアが突く「侵入の隙」とバックアップの「死角」 ~ 過去の教訓に学ぶ — 侵入前提の防御とデータ保護 ~
oracle4engineer
PRO
2
220
Featured
See All Featured
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
120
Producing Creativity
orderedlist
PRO
348
40k
A designer walks into a library…
pauljervisheath
210
24k
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
170
How to train your dragon (web standard)
notwaldorf
97
6.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
Un-Boring Meetings
codingconduct
0
190
Java REST API Framework Comparison - PWX 2021
mraible
34
9.1k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
0
130
Facilitating Awesome Meetings
lara
57
6.7k
Claude Code のすすめ
schroneko
67
210k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Transcript
The Future of Preprocessors
@Roy
None
None
2 0 0 6
None
None
None
0607080910111213141516
0607080910111213141516 Made CSS Great Again
0607080910111213141516
0607080910111213141516
0607080910111213141516
0607080910111213141516
0607080910111213141516
0607080910111213141516
how about css features?
0607080910111213141516 CSS Animations Proposed
0607080910111213141516 CSS Animations -webkit- in Chrome
0607080910111213141516 CSS Animations in Internet Explorer
0607080910111213141516 CSS Animations without -webkit-
0607080910111213141516 CSS Animations still Working Draft
why so long?
None
Idea
Write Editor's Draft
Browsers may experiment with implementing
Write Working Draft
Browsers start implementing
Candidate Recommendation
Two correct, independent implementations
Recommendation
None
Idea
Natalie approves
It's implemented
Works in all browsers
Sass gave us the featureS we needeD. Fast.
CSS is catching up
calc(100% - 80px)
Custom Properties
None
Sass > CSS CSS > Sass
#languagedesign
@if media(...) { ... }
No more preprocessors
Variables, nesting, placeholders, extend, mixins, functions, control structures, lists/maps, math,
...
Programming in your CSS
CSS is a machine language
Creativity > Repetition
Configuration > Search & replace
Fun > Frustration
Sass is great for non-developers too
Don't overdo it
The following code was copy & pasted by trained monkeys.
Do not try this at home.
None