less.js - 在解析器的回调中获取变量值 [英] less.js - get variable values inside parsers' callback

问题描述

我使用less.js（1.3.0）在客户端解析较少的css。在解析器的回调中，我想获得每个变量的值。我尝试了以下但没有成功。

I am using less.js (1.3.0) to parse less to css on the client side. Inside the parsers' callback I want to get the value for each variable. i tried the following without success.

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

Neither eval() nor the toCSS() gave me any results. I do not understand the less parsers' inner workings. Each variable object has a variable property varsDef[k].value which is an object itself. But I just need the string value of the variable.

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

Does anyone know how to get the variables' values as a string?

推荐答案

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

i ran into this problem recently and it bit me because, like you, i had the same instinct of running something like very much like the code you wrote above but for complex variables along the lines of

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

你会得到这个嵌套的树.Value for @barColor 这是解析树的这个嵌套表示，所以它会说，无用的 barcolor： {[value：{value：[{lighten：{...}}]}]} 或某些人。我的解析是非常糟糕的，因为我总是会在某个时刻找到一些对象，这些对象将不再响应我在其上调用tree.toCSS，所以我放弃了这条路线。

you'd get this nested tree.Value for @barColor which was this nested representation of the parse tree, so it would say, unhelpfully that barcolor: {[value: {value: [{lighten: {...}}]}]} or somesuch. my parsing-fu is pretty bad because i would always end up with some object at some point which would no longer respond to me invoking tree.toCSS on it, so i gave up on that route.

相反，我所做的是生成了一个带有导入规则和无意义规则的无意义文件，如此

Instead, what i did was generated a nonsense .less file with an import rule and a nonsense rule, like so

@import "varfile.less";

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

less会很乐意解析这样的文件，它不关心 redColor 是一个真正的css属性，它只是忽略它并完成所有必须尽职尽责的替换。因此，您实际上最终得到了一个可以轻松解析的单个规则css文件，因为它非常直接标记。它看起来像这样：

less will happily parse such a file, it doesn't care if redColor is a real css property or not, it just ignores it and does all the substitutions where it has to dutifully. And so you actually end up with a single rule css file that you can easily parse since it's very straightforwardly marked up. it looks like this:

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

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

this is, coincidentally, the easiest file to parse. it practically begs to be turned into json or what have you. granted, the path to here is pretty comical. i suspect it's because a variable without a rule is still fair game to be modified within the rule itself, but i could just be rationalizing that.

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

assuming you only want to extract the final values of your less vars and not the semantic values of your less vars, it's pretty handy. if you want semantics, it seems better to just parse the actual less file.

我最终在节点中写了这个并且在我超越自己的反对意见之后觉得，它工作得很好，并用我的项目变量给我一个json dict。你可以看一下，它是在 nsfmc / less-extractor 的github上，基本上需要一个基本配置文件然后写入stdout json dict。它不够优雅，但它完全有效，即使它有点hackish。

i ended up writing this in node and after i got past my own objections to how dodgy it felt, it worked quite well and fed me a json dict with my project's variables. you can take a look, it's on github at nsfmc/less-extractor which basically takes a basic config file and then writes to stdout a json dict. it's inelegant, but it totally works, even if it's a bit hackish.

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

your original question asked about doing this entirely client-side, so that would appear to rule out that github project, but the idea is very similar: you want to be able to access the original less file as part of some xhr request, parse it to get the variable names, build a less string, parse that, and then the rest of the code is just string building and run of the mill parsing.

希望对你有帮助！

这篇关于less.js - 在解析器的回调中获取变量值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！