вложенной ссылкой на переменную

Question

у меня есть:

@gutter-xs-width: 20; 

и

@class: 'xs'; 

Я хотел бы иметь что-то вроде:

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

Как я могу это сделать?

Answer 1

Это очень возможно в меньше и ниже, как это делается: (проверено в Less v2.5.1)

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

Для конкатенации значение переменной со статической строки, формат, который обычно используется в Less is "string1-@{string2}". @{string2} оценивает значение, содержащееся в переменной @string2, и добавляет его в string1.

Здесь мы должны сделать дополнительный @{} вокруг значения, полученного после конкатенации, потому что мы не хотим, чтобы в качестве вывода была конкатенированная строка, а значение, содержащееся в переменной, имя которой совпадает с конкатенированной строкой.