LESS：使用连接名称引用另一个值的变量

Question

以下（非常简化的）LESS 代码运行正确，打印 width 属性的值，之前分配给 @screen-md 变量。

@screen-md:700px;
@size:md;

@temp:"screen-@{size}";
@width:@@temp;

.foo
{
  width:@width;
}

想象一下，@size 值可以是传递给混入的参数。一般来说，为了获得想要的结果，我需要通过 @temp 变量，首先根据 @size 值为其分配一个变量名，然后使用 Variable name 最后将其分配给 @width 变量。

我的问题是：是否可以避免需要@temp 变量，崩溃

@temp:"screen-@{size}";
@width:@@temp;

变成类似 @width:@@"screen-@{size}" ?

Answer 1

是的，可以将其折叠成一行，如下所示：

@screen-md:700px;
@size:md;
.mixin(@size){
    width: ~"@{screen-@{size}}"; /* can either be assigned to another variable or property */
}

.output{
    .mixin(md);
}

解释：

screen-@{size} - 计算结果为 screen-md，因为混合输入的输入参数是 md.
@{screen-@{size} - 因此意味着 @{screen-md}。这将被评估为 700px.
~"" - 转义用于避免在输出中打印引号。

LESS：使用连接名称引用另一个值的变量

LESS: variable that refers to another one's value with concatenate name

less