// define your colors
$colors: (
'pink': #E2127A,
'brand-primary': 'pink',
'site-background': 'brand-primary',
);
// color function
@function color($color) {
// our conditional statement
@if map-get($colors, $color) {
// follow the path one step
$new-color: map-get($colors, $color);
// recursion!
$color: color($new-color);
}
@return $color;
}
// use your new function!
body {
background: color('site-background');
}
// other styles...
body {
font-size: 8vmin;
font-family: monospace;
text-align: center;
padding: 40vmin 2em;
&::after {
content: "‘site-background’ == #{color('site-background')}";
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.