A presentation at Tech Talk @ Tagesspiegel in in Berlin, Germany by Gunnar Bittersmann
mit CUstom pRopErtieS Photo by Tore F on Unsplash AbstaNd haLtEn
.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; } }
$x-s: 2em; $x-m: 3em; $x-l: 4em; .a { margin: $x-s; @media (min-width: 40em) { margin: $x-m; } $y-s: 0.5em; $y-m: 1em; $y-l: 2em; @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); } }
:root { “—x-s: 2em; “—x-m: 3em; “—x-l: 4em; .a { margin: var(“—x-s); @media (min-width: 40em) { margin: var(“—x-m); } “—y-s: 0.5em; “—y-m: 1em; “—y-l: 2em; @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: 2em; .a { margin: var(“—x); @media (min-width: 40em) { “—x: 3em; } @media (min-width: 40em) { margin: var(“—x); } @media (min-width: 60em) { “—x: 4em; } @media (min-width: 60em) { margin: var(“—x); } } “—y: 0.5em; @media (min-width: 40em) { “—y: 1em; } .b { margin: calc(var(“—x) - var(“—y)); @media (min-width: 40em) { margin: calc(var(“—x) - var(“—y)); } @media (min-width: 60em) { “—y: 2em; } @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; “—y: 0.5em; @media (min-width: 40em) { “—x: 3em; “—y: 1em; } @media (min-width: 60em) { “—x: 4em; “—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: 4em; “—y: 2em; @media (max-width: 40em) { “—x: 3em; “—y: 1em; } @media (max-width: 60em) { “—x: 2em; “—y: 0.5em; } } .a { margin: 4em; margin: var(“—x); } .b { margin: 2em; margin: calc(var(“—x) - var(“—y)); }
Ulrike Rausch, LiebeFonts Fira sans/Mon0 Erik Spiekermann et al. Photo by Tore F on Unsplash LiebedOriS
Lightning talk on the benefits of CSS custom properties over preprocessor variables
