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

时间:2013-10-17 06:22:11

标签: javascript html css node.js 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'的String并将其转换为〜“@ {white}”。 less mixin的示例代码如下所示。

@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}”得到@hite中存储的值时,不会被评估为变量white?

1 个答案:

答案 0 :(得分:1)

  

为什么〜“@ {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文档。