提问人：Philipp 提问时间：8/6/2012 最后编辑：Philipp 更新时间：7/9/2014 访问量：2425
less.js - 获取解析器回调中的变量值
less.js - get variable values inside parsers' callback
问：
我正在使用 less.js （1.3.0） 在客户端将 less 解析为 css。在解析器的回调中，我想获取每个变量的值。我尝试了以下方法，但没有成功。
var data = "@colour: red; #example { background-color: @colour; }",
parser = new less.Parser({});
parser.parse(data, function (error, root) {
console.log( root.toCSS() );
var varsDef = root.variables();
for (k in varsDef) {
console.log(varsDef[k]);
// how to get the value for the var?
//not working
console.log(varsDef[k].eval());
//not working
console.log(varsDef[k].toCSS());
//is an object but looking for a string value
console.log(varsDef[k].value);
//returns an empty string
console.log(varsDef[k].value.toCSS());
}
});
eval（） 和 toCSS（） 都没有给我任何结果。我不明白较少的解析器的内部工作原理。每个变量对象都有一个变量属性 varsDef[k].value，它本身就是一个对象。但我只需要变量的字符串值。
有谁知道如何将变量的值作为字符串获取？
答：
0赞
Luke Page
8/6/2012
#1
varsDef[k].value.toCSS()
应该是值
varsDef[k].name
应该是变量名称
varsDef[k].toCSS()
不返回任何内容，因为它是一个变量 - 在 CSS 中，变量不输出。
评论
0赞
Philipp
8/7/2012
恐怕行不通。 返回 en 空字符串而不是“red”。varsDef[k].value.toCSS()
0赞
Steven Pribilinskiy
1/2/2015
@luke，我能够通过向 Parser 构造函数提供空对象来在客户端获取对象，即 .问题是当有语句并且解析器失败时Rulesetless.js v2.1(new less.Parser({}, {contents: {}}, {})).parse(lessMarkup, function (err, ruleset) {})@importlessMarkup
0赞
Marcos
4/5/2014
#2
我最近遇到了这个问题，它让我很痛苦，因为和你一样，我有同样的本能，运行的东西与你上面写的代码非常相似，但对于复杂的变量，沿着
@redColor: #900; // responds to .toCSS()
@fooColor: desaturate(@redColor, 20%); // both of these error out
@barColor: lighten(@fooColor, 10%); // when calling .toCSS()
你会得到这个嵌套的，这是解析树的嵌套表示，所以它会说，无益的那个或类似的东西。我的解析很糟糕，因为我总是在某个时候得到一些对象，这些对象不再响应我调用 tree.toCSS，所以我放弃了这条路线。tree.Value@barColorbarcolor: {[value: {value: [{lighten: {...}}]}]}
相反，我所做的是生成一个带有导入规则和无意义规则的废话 .less 文件，如下所示
@import "varfile.less";
.foo {
redColor: @redColor;
fooColor: @fooColor;
barColor: @barColor;
}
Less会很乐意解析这样的文件，它不在乎是否是真正的CSS属性，它只是忽略它，并在必须尽职尽责的地方进行所有替换。因此，您实际上最终会得到一个可以轻松解析的规则 css 文件，因为它被非常直接地标记出来。它看起来像这样：redColor
.foo{
redColor: #990000;
fooColor: #8a0f0f;
barColor: #b81414;
}
巧合的是，这是最容易解析的文件。它实际上乞求变成 JSON 或你有什么。诚然，通往这里的道路非常滑稽。我怀疑这是因为没有规则的变量仍然可以在规则本身内进行修改，但我可能只是将其合理化。
假设您只想提取 LESS VAR 的最终值，而不是 LESS VAR 的语义值，那么它非常方便。如果你想要语义，最好只解析实际的less文件。
我最终在 Node 中写了这篇文章，在我克服了自己对它感觉多么狡猾的反对意见之后，它运行得很好，并为我提供了一个带有项目变量的 JSON 字典。你可以看一下，它在 GitHub 上的 nsfmc/less-extractor 上，它基本上需要一个基本的配置文件，然后写入 stdout 一个 JSON 字典。 这很不优雅，但它完全有效，即使它有点黑客。
您最初的问题是关于完全在客户端执行此操作，因此这似乎排除了 GitHub 项目，但想法非常相似：您希望能够访问原始的 less 文件作为某个 XHR 请求的一部分，解析它以获取变量名称，构建一个 less 字符串，解析它，然后代码的其余部分只是字符串构建和运行磨坊解析。
希望对您有所帮助！
-2赞
Hitchcott
7/9/2014
#3
我也遇到了较少解析器的问题;这样做对于树节点的递归检查是荒谬的。
如果你不想得到实际值而不是生成的CSS（如上面的答案），最好的方法是手动解析文件的文本。
此函数为给定的 less 文件中的每个变量返回一个键/值对。如果 LESS 文件每行有多个值，它将不起作用，您可以使用正则表达式使其更好。我用它来解析 bootstrap 的变量文件，效果很好。
getLessVars = (lessStr) ->
lines = lessStr.split('\n')
lessVars = {}
for line in lines
if line.indexOf('@') is 0
keyVar = line.split(';')[0].split(':')
lessVars[keyVar[0]] = keyVar[1].trim()
return lessVars
评论