Lightning talk on the benefits of CSS custom properties over preprocessor variables
mit CUstom pRopErtieSAbstaNd haLtEnPhoto by Tore F on Unsplash
View Slide
.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;}}
.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;
.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;}
.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;}}
.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;}}
.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;}}
.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;}}
.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;}}
LiebedOriSUlrike Rausch,LiebeFontsPhoto by Tore F on UnsplashFira sans/Mon0Erik Spiekermann et al.