5

我正在使用 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，它本身就是一个对象。但我只需要变量的字符串值。

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

4

3 回答 3

0 
varsDef[k].value.toCSS()

应该是值

varsDef[k].name

应该是变量名

varsDef[k].toCSS()

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

于 2012-08-06T14:00:22.373 回答
0

我最近遇到了这个问题，它咬了我，因为像你一样，我有同样的直觉，运行类似于你上面写的代码的东西，但是对于复杂的变量

@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: {...}}]}]}或类似的东西。我的 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 var 的最终值而不是 less var 的语义值，这非常方便。如果你想要语义，最好只解析实际的 less 文件。

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

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

希望对你有帮助！

于 2014-04-04T16:00:14.833 回答
-2

I was also having issues with the less parser too; doing it that way was getting ridiculous with recursive checking of tree nodes.

If you wan't the actual values as opposed to the CSS generated (as per the above answer), the best way is to probably manually parse the file's text.

This function returns a key/value pair for each of the variables in a given less file. It wont work if the LESS file has multiple values per line, you could make it better with regex. I used it to parse bootstrap's variables file, which works nicely.

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
于 2014-07-09T08:14:55.017 回答