Use a variable as a mixin lookup does not work

[lostkeys]

I'm trying to make a IE comparability mode with Less, where a CSS Custom Prop is returned by default, or a static value if a flag is set to true. But I can't get it to work. I'm wondering if it's a bug or I'm doing something wrong?

I'm having a mixin act as a map, and then another mixin do the logic. But I cant get the "logic-mixin" to lookup the value in the "map-mixin".

Here is a simplified example without all the CSS Custom Props crap (codepen demo)

.vars() {
  background-color: #0000ff;
  color: contrast($background-color, #000, #fff);
}

.mixin(@val) {
  @return: .vars[@val]; // Does not work
  //@return: .vars[background-color]; // Removing the variable works 
}

div {
  display: inline-block;
  padding: 1rem;
  background-color: .mixin(background-color)[@return];
  color: .mixin(color)[@return];  
}

Here is a codepen with the complete use-case for context

[seven-phases-max]

Docs:

One important thing to notice is that the value in [@lookup] is the key (variable) name @lookup, and is not evaluated as a variable.

I.e. .vars[@val]; will look for a variable named @val within .vars (obviously there's no).
To get to a property named by a value of the @val you'll need .vars[$@val] (Properties as Variables).

[seven-phases-max]

Closing as not an issue (the documentation update request is open: less/less-docs#500)

[lostkeys]

Ah that makes sense. Thanks for the help!