// 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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.