Nested variable reference

Question

I have:

@gutter-xs-width:  20;

and

@class:   'xs';

I'd like to have something like:

padding-left:  @gutter-(@class)-width;

How can I do it?

Answer 1

That is very much possible in Less and the below is how it is done: (tested in Less v2.5.1)

@gutter-xs-width:  20;
@class:   'xs';
a{
  padding-left:  ~"@{gutter-@{class}-width}";
}

For concatenating the value of a variable with a static string, the format that is generally used in Less is "string1-@{string2}". @{string2} evaluates the value contained within the @string2 variable and appends it to string1.

Here we have to do an extra @{} around the value that is obtained after concatenation because we don't want the concatenated string as the output but rather the value contained by the variable whose name is the same as the concatenated string.