Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Abstand halten – mit custom properties

Abstand halten – mit custom properties

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

Gunnar Bittersmann

March 09, 2020
Tweet

More Decks by Gunnar Bittersmann

Other Decks in Programming

Transcript

  1. mit CUstom pRopErtieS
    AbstaNd haLtEn
    Photo by Tore F on Unsplash

    View Slide

  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;
    }
    }

    View Slide

  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;

    View Slide

  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;
    }

    View Slide

  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;
    }
    }

    View Slide

  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;
    }
    }

    View Slide

  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;
    }
    }

    View Slide

  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;
    }
    }

    View Slide

  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;
    }
    }

    View Slide

  10. LiebedOriS
    Ulrike Rausch,
    LiebeFonts
    Photo by Tore F on Unsplash
    Fira sans/Mon0
    Erik Spiekermann et al.

    View Slide