// define your colors
colors = {
'pink': #E2127A,
'brand-primary': 'pink',
'site-background': 'brand-primary',
}
// color function
get_color(color)
// our conditional statement
if color in colors
next = colors[color]
// recursion!
get_color(next)
else
// return value of color
color
// use your new function!
body {
background: get_color('site-background');
}
// other styles...
body
font-size 8vmin
font-family monospace
text-align center
padding 40vmin 2em
&::after
content "‘site-background’ == " + get_color('site-background')
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.