Question

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

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

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

.foo
{
  width:@width;
}

想象一下，@size值可以是传递给mixin的参数。通常，为了获得所需的结果，我需要传递@temp变量，首先根据@size值为她分配变量名称，然后使用Variable name最终将其分配给{@width 1}}变量。

我的问题是：是否可以避免需要@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，因为mixin的输入参数为md。
@{screen-@{size} - 因此意味着@{screen-md}。这将被评估为700px。
~"" - 转义用于避免在输出中打印引号。

LESS：带有连接名称的另一个值的变量

1 个答案: