嵌套变量引用

Question

我有：

@gutter-xs-width:  20;

和

@class:   'xs';

我希望有类似的内容：

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

我该怎么办？

Answer 1

这在Less中是非常可能的，以下是它是如何完成的:(在Less v2.5.1中测试）

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

为了将变量的值与静态字符串连接起来，Less中通常使用的格式为"string1-@{string2}"。 @{string2}评估@string2变量中包含的值，并将其附加到string1。

这里我们必须在连接后获得的值附加@{}，因为我们不希望连接字符串作为输出，而是包含名称与其相同的变量所包含的值串联的字符串。