Abstand halten – mit custom properties

Lightning talk on the benefits of CSS custom properties over preprocessor variables

Transcript

1. mit CUstom pRopErtieS AbstaNd haLtEn Photo by Tore F on Unsplash
2. .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; } }
3. .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;
4. .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; }
5. .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; } }
6. .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; } }
7. .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; } }
8. .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; } }
9. .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; } }
10. LiebedOriS Ulrike Rausch, LiebeFonts Photo by Tore F on Unsplash Fira sans/Mon0 Erik Spiekermann et al.