less.js - 在解析器的回调中获取变量值答案

【问题标题】：less.js - get variable values inside parsers' callbackless.js - 在解析器的回调中获取变量值
【发布时间】：2012-08-03 09:00:18
【问题描述】：

我正在使用 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() 都没有给我任何结果。我不了解 less 解析器的内部工作原理。每个变量对象都有一个变量属性 varsDef[k].value，它本身就是一个对象。但我只需要变量的字符串值。

有谁知道如何将变量的值作为字符串获取？

【问题讨论】：

标签： javascript parsing variables client-side less

【解决方案1】：

varsDef[k].value.toCSS()

应该是值

varsDef[k].name

应该是变量名

varsDef[k].toCSS()

什么都不返回，因为它是一个变量——在 CSS 中变量不输出。

【讨论】：

恐怕不行。 varsDef[k].value.toCSS() 返回 en 空字符串而不是 "red"。
@luke，通过向 Parser 构造函数提供空对象，即(new less.Parser({}, {contents: {}}, {})).parse(lessMarkup, function (err, ruleset) {})，我能够在客户端less.js v2.1 中获取Ruleset 对象。问题是当lessMarkup 中有@import 语句并且解析器失败时

【解决方案2】：

我最近遇到了这个问题，这让我很苦恼，因为和你一样，我有同样的直觉，即运行类似于你上面写的代码的东西，但对于复杂的变量，

@redColor: #900;  // responds to .toCSS()
@fooColor: desaturate(@redColor, 20%);  // both of these error out 
@barColor: lighten(@fooColor, 10%);  // when calling .toCSS()

你会得到这个嵌套的tree.Value for @barColor，这是解析树的嵌套表示，所以它会说，barcolor: {[value: {value: [{lighten: {...}}]}]} 或类似的东西没有帮助。我的 parsing-fu 非常糟糕，因为我总是会在某个时候得到一些对象，这些对象将不再响应我在其上调用 tree.toCSS，所以我放弃了那条路线。

相反，我所做的是生成一个带有导入规则和无意义规则的无意义的 .less 文件，就像这样

@import "varfile.less";

.foo {
  redColor: @redColor;
  fooColor: @fooColor;
  barColor: @barColor;
}

less 会愉快地解析这样的文件，它不关心 redColor 是否是一个真正的 css 属性，它只是忽略它并尽职尽责地进行所有替换。因此，您实际上最终得到了一个可以轻松解析的规则 css 文件，因为它的标记非常简单。它看起来像这样：

.foo{
  redColor: #990000;
  fooColor: #8a0f0f;
  barColor: #b81414;
}

巧合的是，这是最容易解析的文件。它实际上乞求变成 json 或你有什么。当然，通往这里的道路非常可笑。我怀疑这是因为没有规则的变量仍然是可以在规则本身内修改的公平游戏，但我可能只是将其合理化。

假设您只想提取 less 变量的最终值而不是 less 变量的语义值，这非常方便。如果你想要语义，最好只解析实际的 less 文件。

我最终在节点中写了这个，在我克服了我自己对它感觉有多狡猾的反对意见之后，它工作得很好，并为我提供了一个包含项目变量的 json dict。你可以看一下，它在 github 上nsfmc/less-extractor，它基本上需要一个基本的配置文件，然后将一个 json 字典写入标准输出。它不优雅，但它完全有效，即使它有点 hackish。

您最初的问题是关于完全在客户端执行此操作，因此这似乎排除了该 github 项目，但想法非常相似：您希望能够访问原始 less 文件作为某些 xhr 请求的一部分，解析它以获取变量名，构建一个更少的字符串，解析它，然后剩下的代码只是字符串构建和磨机解析的运行。

希望对你有所帮助！

【讨论】：

【解决方案3】：

我也遇到了 less 解析器的问题；这样做对树节点的递归检查变得很荒谬。

如果您不想要实际值而不是生成的 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

【讨论】：