Variable Name Interpolation

Currently it’s possible to define variables with a variable name, like so:

@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;

But not with a partially variable name, like so:

@fnord-string: "I am fnord.";
@var: 'fnord';
content: @@{var}-string;

This would be particularly useful for long parametric mixins that you’d like to behave slightly differently depending on a variable. For example:

@sans-serif: Arial, sans-serif;
@serif: Georgia, Times, serif;
@sans-serif-size: 16px;
@serif-size: 18px;

.typography(@font-family: sans-serif) {
  font-family: @@font-family;
  font-size: @@{font-family}-size;
}

Here our mixin isn’t very long so we could use pattern-matching instead, but I happen to be working on a mixin that does several baseline related calculations in which two values depend on the font being used. I don’t want to duplicate my mixins since I’d then have to update all of them if my calculations change.

[ngsilverman]

Fair point. I would argue that it’s reasonable to expect the @@{var}-string (or @{@{var}-string}) syntax to work, and so when you need that functionality it’s the workaround that makes less more complicated.

[lukeapage]

closing due to inactivity