如何使字符串指向 Less 中的变量

How to make a string to point to a variable in Less?

本文关键字：变量 Less 何使 字符串      更新时间：2023-09-26

我扩展了默认的less函数以支持一些基本列表。我添加了一个函数"nth"，如下所示：

"nth": function(obj, index){
    var list = obj.value.split(",");
    var n = index.value;
    obj.value = list[n-1].trim();
    return new tree.Anonymous(obj);
 }

然后我添加了另一个函数"convertstrtovar"，如下所示：

convertstrtovar: function(obj){
     var str = obj.value.toString();
     str = str.replace(/(@)/gi, '');
     str = '~"@{' + str + '}"';
     obj.value = str;
     return new tree.Anonymous(obj);
}

这将接收像"@white"这样的字符串并将其转换为~"@{white}"。下面给出了较少混合的示例代码。

@button-text-colors: "@white, @dark, @red"; //parsed as a comma separated list.
@white: white;
@dark: black;
@red: red;
.something(@color){
    color: @color;
}
.some{
    @t: convertstrtovar(nth(@button-text-colors, 1));
    .something(@t);
}

这给了我如下输出：

.some {
    color: ~"@{white}";
}

为什么 ~"@{white}" 被打印为字符串而不是计算为变量 white，而通常 ~"@{white}" 在更少的情况下获取存储在 @white 中的值？

为什么 ~"@{white}" 被打印为字符串而不是通常 ~"@{white}"

因为 LESS 在解析输入时会计算这些内容（但您的函数在此之后会创建一个新的字符串对象）。

实际上，您只需使用默认的 LESS 语言结构即可实现您想要的（无需自定义函数黑客）：

@button-text-colors: 'white', 'dark', 'red';
@white: white;
@dark: black;
@red: red;
.something(@color){
    color: @color;
}
.some{
    @t: extract(@button-text-colors, 1);
    .something(@@t);
}

不，说真的，我建议您在尝试使用自己的自定义函数扩展它之前，考虑了解有关现有 LESS 功能的更多信息......（虽然我必须承认过时的 LESS 文档是一个重大问题 - 好吧，至少看看 https://github.com/SomMeri/less4j/wiki/_pages - 这是目前最详细的 LESS 文档）。

相关文章：