Question

我试图基于一些预定义的变量片段在循环中生成许多类。

我有一个variables.less文件，我在这个包含我的颜色变量的less文件的顶部导入。然后我想为这些生成匹配的类，但是我无法减少编译变量的时间。

我的代码：

.loop-class(~"primary", ~"success", ~"info", ~"warning", ~"danger";);
.loop-class(@list, @index: 1) when (isstring(extract(@list, @index))) {
    @status: extract(@list, @index);

    .button-@{status} {
        color: ~'@button-@{status}';
    }
    .loop-class(@list, (@index + 1));
}

编译为：

.button-primary {
  color: @button-primary;
}
.button-success {
  color: @button-success;
}
etc etc

正如你所看到的，我得到变量名称以正确连接，但是我无法解决它，所以我猜测LESS在进入这个函数之前已经完成了变量编译了吗？

我已经尝试将变量移动到这个文档中，以及将变量包装在mixin中并在.loop-class中添加它们，但这些似乎都没有帮助。

我也尝试过这样的事情：

@status: extract(@list, @index);
@compileClass: ~'@button-@{status}';

.button-@{status} {
    color: @compileClass;
}

我将变量保存在另一个变量中然后引用它，但它会产生相同的结果。

我查看less css calling dynamic variables from a loop并尝试按如下方式实施：

.loop-class(~"primary", ~"success", ~"info", ~"warning", ~"danger";);
.define(@var) {
    @fallback: ~'@button-@{var}';
}

.loop-class(@list, @index: 1) when (isstring(extract(@list, @index))) {
    @status: extract(@list, @index);

    .button-@{status} {
        .define(@status);
        color: @@fallback;
    }
    .loop-class(@list, (@index + 1));
}

但是这给了我一个错误，即@@ button-danger（索引中的最后一个）是未定义的，因此它仍然无法解析变量。

你们明白我做错了吗？

感谢您的帮助！

Answer 1

缺少括号

您缺少一组需要的括号来解析变量：

<强> LESS

//imported from another file
@button-primary: cyan;
@button-success: green;
@button-info: orange;
@button-warning: yellow;
@button-danger: red;

//in your mixin file
.loop-class(~"primary", ~"success", ~"info", ~"warning", ~"danger";);
.loop-class(@list, @index: 1) when (isstring(extract(@list, @index))) {
    @status: extract(@list, @index);

    .button-@{status} {
    color: ~'@{button-@{status}}'; /* two more brackets needed */
              |                |
            here             here
    }
    .loop-class(@list, (@index + 1));
}

CSS输出

.button-primary {
  color: #00ffff;
}
.button-success {
  color: #008000;
}
.button-info {
  color: #ffa500;
}
.button-warning {
  color: #ffff00;
}
.button-danger {
  color: #ff0000;
}

清洁更友好的代码

此外，作为一个不那么混乱且用户友好的代码，您可以通过将mixin中的isstring更改为iskeyword来删除混音调用所需的多个字符串插值：

.loop-class(primary, success, info, warning, danger;); /* cleaner code on call */
.loop-class(@list, @index: 1) when (iskeyword(extract(@list, @index))) {
    @status: extract(@list, @index);

    .button-@{status} {
    color: ~'@{button-@{status}}';
    }
    .loop-class(@list, (@index + 1));
}

解决LESS中的动态变量

1 个答案:

缺少括号

清洁更友好的代码