Abstand halten – mit custom properties

Abstand halten – mit custom properties

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

051dbe29a972707cde167602b38c9778?s=128

Gunnar Bittersmann

March 09, 2020
Tweet

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.