Question

我使用less.js（1.3.0）在客户端解析较少的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，它是一个对象本身。但我只需要变量的字符串值。

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

Answer 1

varsDef[k].value.toCSS()

应为值

varsDef[k].name

应该是变量名称

varsDef[k].toCSS()

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

Answer 2

我最近遇到了这个问题而且它让我感到困惑，因为和你一样，我有同样的本能，就像你上面写的代码一样，但是对于复杂的变量

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

你为tree.Value得到了这个嵌套的@barColor，这是解析树的这个嵌套表示，所以它会毫无用处地说barcolor: {[value: {value: [{lighten: {...}}]}]}或其他一些。我的解析是非常糟糕的，因为我总是会在某个时刻找到一些对象，这些对象将不再响应我在其上调用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或者你有什么。被授予，通往这里的道路非常可笑。我怀疑它是因为没有规则的变量仍然是在规则本身内被修改的公平游戏，但我可能只是合理化了。

假设您只想提取较小变量的最终值而不是较小变量的语义值，那么它非常方便。如果你想要语义，那么解析实际的较少文件似乎更好。

我最终在节点中写了这篇文章，在我对自己感觉到的狡猾状态提出异议之后，它的效果非常好，并且用我的项目变量给了我一个json dict。你可以看一下，它在nsfmc/less-extractor的github上，基本上需要一个基本的配置文件，然后写入stdout一个json dict。它不够优雅，但它完全有效，即使它有点hackish。

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

希望能帮到你！

Answer 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

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

3 个答案: