Variables 在较少的时间内解析动态变量

我正试图根据一些预定义的变量片段在循环中生成一些类

我有一个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类中，但这两种方法似乎都没有帮助

我也试过这样的方法：

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

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

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

我研究并尝试实现以下内容：

.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（索引中的最后一个）未定义，因此它仍然无法解析变量

你们知道我做错了什么吗

谢谢你的帮助

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

更少

//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));
}

---

欢迎来到Stack Overflow，感谢您在第一篇文章中发布了一个结构良好的问题。非常感谢Scott，也感谢您解决了我的第一个问题！；）太好了，解决方案非常有效！使用iskeyword非常好，这无疑会使它更容易阅读和理解。非常感谢，斯科特！