// Color variables are scoped to the colors() mixin
@colors:
  'pink' #E2127A,
  'brand-primary' 'pink',
  'site-background' 'brand-primary'
;

// get an array value, based on key name
.array-get(@array, @key) {
  // create the recursive loop
  .loop(length(@array));
  .loop(@i) when (@i > 0) {
    .loop(@i - 1);
  }
  // when we find the key, return the value
  .loop(@i) when (@key = extract(extract(@array, @i), 1)) {
    @got: extract(extract(@array, @i), 2);
  }
}

// if it's a color, output the result
.color (@name) when (iscolor(@name)) {
  @color-return: @name;
}

// if it's not a color, keep looping
.color (@name) when (isstring(@name)) {
  // get the value of our current key
  .array-get(@colors, @name);

  // The function calls itself, recursively...
  .color(@got);
}


// usage...
body {
  .color('site-background');
  background: @color-return;
  

  // other styles...
  font-size: 8vmin;
  font-family: monospace;
  text-align: center;
  padding: 40vmin 2em;

  &::after {
    content: '‘site-background’ == @{color-return}';
  }
}