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
   

   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