Abstand halten – mit custom properties

051dbe29a972707cde167602b38c9778?s=47 Gunnar Bittersmann
March 09, 2020
Programming
0
23

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

More Decks by Gunnar Bittersmann

See All by Gunnar Bittersmann
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
8
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
8
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
1
21
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
28
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
2
16
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
48
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
58
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
45
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
21

Other Decks in Programming

See All in Programming
098d1adf6ec5b955e29e624b6cc9b6f9?s=48 totokit4
2
130
D1804d3c315cbb850aaa88d2fbadc3cf?s=48 keitheis
0
160
F52f4adb291c5b44bd8ad1433dfedaaf?s=48 ytyubox
1
470
20c5ddcad23304aed77ce8c3aa020562?s=48 tkmru
2
260
7c9b8b368924556d8642bdaed3ded1f5?s=48 danilop
1
240
7d1521d950d9bc5697868830cb04ff2f?s=48 yimajo
0
110
4578d99b560b2a470e05288ef6766ac2?s=48 paulk
0
650
26afa82334d1037f0ba602272b950c90?s=48 kazuhitotakahashi
0
230
9178046d79f7b01ec590297c019fdd56?s=48 nagworld
1
230
0eba807ea367a2b648480d20f52d3af3?s=48 haco
0
220
52711e2157a6fed933b0361cc06a6953?s=48 marcelgsantos
1
240
774a937b74096e82576b37678d00aeca?s=48 kishino
1
110

Featured

See All Featured
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
408
57k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
320
53k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
94
5.1k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
155
11k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
125
21k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
66
2.9k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
251
11k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
114
7k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
5
580
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
282
46k
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
237
23k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
220
15k

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.