// map of colors
$colors: (
'pink': #E2127A,
'brand-primary': 'pink',
'site-background': 'brand-primary',
);
body {
// The color we're looking for...
$color: 'site-background';
// keep following the path until it ends...
@while map-has-key($colors, $color) {
// update the value of $color,
// before we try again...
$color: map-get($colors, $color);
}
// Apply the variable!
background: $color;
// other styles...
font-size: 8vmin;
font-family: monospace;
text-align: center;
padding: 40vmin 2em;
&::after {
content: '‘site-background’ == #{$color}';
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.