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
Abstand halten – mit custom properties
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Gunnar Bittersmann
March 09, 2020
Programming
0
50
Abstand halten – mit custom properties
Lightning talk on the benefits of CSS custom properties over preprocessor variables
Gunnar Bittersmann
March 09, 2020
Tweet
Share
More Decks by Gunnar Bittersmann
See All by Gunnar Bittersmann
Responsive typography 2
gunnarbittersmann
0
160
Go home, Prettifier, you’re drunk!!
gunnarbittersmann
0
110
3 Fehler sind zu finden
gunnarbittersmann
0
190
TIL that the future :has already begun
gunnarbittersmann
0
120
TIL how to clear floats
gunnarbittersmann
0
120
TIL about showModal (from small things big things one day come)
gunnarbittersmann
0
130
Inclusive Design 24 2022 – Gunnar’s picks
gunnarbittersmann
0
100
The color rebeccapurple
gunnarbittersmann
0
180
Mehrsprachige Websites
gunnarbittersmann
0
110
Other Decks in Programming
See All in Programming
生成AIを使ったコードレビューで定性的に品質カバー
chiilog
1
270
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
izumin5210
7
2.3k
AI Schema Enrichment for your Oracle AI Database
thatjeffsmith
0
280
Grafana:建立系統全知視角的捷徑
blueswen
0
330
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
tosuri13
4
710
CSC307 Lecture 02
javiergs
PRO
1
780
Data-Centric Kaggle
isax1015
2
770
KIKI_MBSD Cybersecurity Challenges 2025
ikema
0
1.3k
それ、本当に安全? ファイルアップロードで見落としがちなセキュリティリスクと対策
penpeen
7
3.9k
コマンドとリード間の連携に対する脅威分析フレームワーク
pandayumi
1
450
インターン生でもAuth0で認証基盤刷新が出来るのか
taku271
0
190
AI時代の認知負荷との向き合い方
optfit
0
160
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
187
22k
Ethics towards AI in product and experience design
skipperchong
2
190
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Odyssey Design
rkendrick25
PRO
1
500
Making Projects Easy
brettharned
120
6.6k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
220
Fireside Chat
paigeccino
41
3.8k
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
55
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
66
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
82
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
0
3.4k
Transcript
mit CUstom pRopErtieS AbstaNd haLtEn Photo by Tore F on
Unsplash
.a { margin: 2em; @media (min-width: 40em) { margin: 3em;
} @media (min-width: 60em) { margin: 4em; } } .b { margin: 1.5em; @media (min-width: 40em) { margin: 2em; } @media (min-width: 60em) { margin: 2em; } }
.a { margin: $x-s; @media (min-width: 40em) { margin: $x-m;
} @media (min-width: 60em) { margin: $x-l; } } .b { margin: calc($x-s - $y-s); @media (min-width: 40em) { margin: calc($x-m - $y-m); } @media (min-width: 60em) { margin: calc($x-l - $y-l); } } $x-s: 2em; $x-m: 3em; $x-l: 4em; $y-s: 0.5em; $y-m: 1em; $y-l: 2em;
.a { margin: var("--x-s); @media (min-width: 40em) { margin: var("--x-m);
} @media (min-width: 60em) { margin: var("--x-l); } } .b { margin: calc(var("--x-s) - var("--y-s)); @media (min-width: 40em) { margin: calc(var("--x-m) - var("--y-m)); } @media (min-width: 60em) { margin: calc(var("--x-l) - var("--y-l)); } } :root { "--x-s: 2em; "--x-m: 3em; "--x-l: 4em; "--y-s: 0.5em; "--y-m: 1em; "--y-l: 2em; }
.a { margin: var("--x); @media (min-width: 40em) { margin: var("--x);
} @media (min-width: 60em) { margin: var("--x); } } .b { margin: calc(var("--x) - var("--y)); @media (min-width: 40em) { margin: calc(var("--x) - var("--y)); } @media (min-width: 60em) { margin: calc(var("--x) - var("--y)); } } :root { "--x: 2em; @media (min-width: 40em) { "--x: 3em; } @media (min-width: 60em) { "--x: 4em; } "--y: 0.5em; @media (min-width: 40em) { "--y: 1em; } @media (min-width: 60em) { "--y: 2em; } }
.a { margin: var("--x); } .b { margin: calc(var("--x) -
var("--y)); } :root { "--x: 2em; @media (min-width: 40em) { "--x: 3em; } @media (min-width: 60em) { "--x: 4em; } "--y: 0.5em; @media (min-width: 40em) { "--y: 1em; } @media (min-width: 60em) { "--y: 2em; } }
.a { margin: var("--x); } .b { margin: calc(var("--x) -
var("--y)); } :root { "--x: 2em; "--y: 0.5em; @media (min-width: 40em) { "--x: 3em; "--y: 1em; } @media (min-width: 60em) { "--x: 4em; "--y: 2em; } }
.a { margin: 2em; margin: var("--x); } .b { margin:
1.5em; margin: calc(var("--x) - var("--y)); } :root { "--x: 2em; "--y: 0.5em; @media (min-width: 40em) { "--x: 3em; "--y: 1em; } @media (min-width: 60em) { "--x: 4em; "--y: 2em; } }
.a { margin: 4em; margin: var("--x); } .b { margin:
2em; margin: calc(var("--x) - var("--y)); } :root { "--x: 4em; "--y: 2em; @media (max-width: 40em) { "--x: 3em; "--y: 1em; } @media (max-width: 60em) { "--x: 2em; "--y: 0.5em; } }
LiebedOriS Ulrike Rausch, LiebeFonts Photo by Tore F on Unsplash
Fira sans/Mon0 Erik Spiekermann et al.