使用less.js获取更少的变量列表 [英] Get less variables list using less.js

问题描述

我使用客户端less.js。有一种方法来获取所有的变量从我的较少的文件。我知道如何修改变量：

  less.modifyVars（{
@var：#fff
}）; 
  

但我想得到所有的人，喜欢（不工作）：

  var variables = less.getVars（）; 
  

解决方案

这将是一个非常规的答案，因为它似乎该数据未作为面向浏览器的API的一部分公开公开。

---

tl; dr

• 保存 less.js 文件的本地副本。 li>
  

• 在某处添加此函数定义

    function exposeVars（root）{
   var r = root._variables，n = Object.keys（r），m = {} 
   for（var k of n）{m [k] = r [k] .value} 
   less .variables = m; 
  } 
    




• 添加以下调用 exposeVars ） 之前返回结果在线〜2556。



• c> less.variables 包含您文件中的所有变量。

>：这不是一个好主意！如果你只是玩弄，调试或测试的东西，这不错，但不要依赖这个黑客的任何严重！

---

这里的基本目的是找到源代码中的 .less 文件变成抽象语法树（或其他形式结构）。

直接跳到源代码，我发现了一个 ParseTree 类。这是一个合理的假设，猜测它将包含解析较少的文件的结果。

我写了一个快速测试文件，并将其添加到浏览器与适当的标签。它看起来像这样：

  @myvar：red; 
 @othervar：12px; 
 
 body {
 padding：@othervar; 
 background：@myvar; 
} 
  

我已下载了

您甚至可以修改expose函数，从调用 less.getVars（）返回变量。

  function exposeVars（root）{
 // ... 
 less .getVars = function（）{
 return variables; 
}; 
} 
  

I'm using client-side less.js. Is there a way to get all variables from my less file. I know how to modify variables:

less.modifyVars({
  "@var": "#fff"
});

But I want to get all of them, like (don't work):

var variables = less.getVars();

解决方案

This is going to be an unconventional answer as it seems that this data isn't publicly exposed as part of the browser facing API.

---

tl;dr

• Save a local copy of the less.js file.

• Add this function definition somewhere

  function exposeVars(root) {
       var r=root._variables,n=Object.keys(r),m={}
       for(var k of n){m[k]=r[k].value}
           less.variables = m;
  }
  

• Add the following call exposeVars(evaldRoot) just before return result on line ~2556.

• Now less.variables contains all the variables from your file.

Disclaimer: Doing this is not a good idea! It's fine if you're just playing around, debugging or testing something, but don't depend on this hack for anything serious!

---

The basic aim here was to find the point in the source where the .less files are turned into abstract syntax trees (or some other formal structure).

Jumping straight into the source, I found a ParseTree class. It's a reasonable assumption to guess that it will contain the result of parsing the less file.

I wrote a quick test file and added it to the browser with the appropriate tag. It looks like this:

@myvar: red;
@othervar: 12px;

body {
  padding: @othervar;
  background: @myvar;
}

I've downloaded a local copy of less.js and added a breakpoint added to line 2556.

I had a poke around in the local scope to see what was available and found the variables in an object called evaldRoot.

evaldRoot = {
  _variables: {
    @myvar: {
      name: '@myvar',
      value: Color
    },
    @othervar: {
      name: '@othervar',
      value: Dimension
    }
  }
}

Next job was to work out where this data goes. It seems like the evaldRoot variable is used to generate the resulting CSS (which would make sense, as it contains information such as variables).

if (options.sourceMap) {
  sourceMapBuilder = new SourceMapBuilder(options.sourceMap);
  result.css = sourceMapBuilder.toCSS(evaldRoot, toCSSOptions, this.imports);
} else {
  result.css = evaldRoot.toCSS(toCSSOptions);
}

Whatever happens, the variables goes out of scope after it is used to generate a string of CSS as result.css.

To expose of these variables, the script needs a small modification. You'll have to expose the variables publicly somehow. Here's an example of doing that.

function exposeVars(root) {
  var varNames = Object.keys(root._variables);

  var variables = varNames.reduce(function(varMap, varName) {
    varMap[varName] = root._variables[varName].value;
  }, {});

  less.variables = variables;
}

This can be added just before the return statement with the breakpoint.

exposeVars(evaldRoot);
return result;

Now the variables will be available in a name: value object on the global less object.

You could even modify the expose function to return the variables from a call to less.getVars(). Just like your initial suggestion.

function exposeVars(root) {
  // ...
  less.getVars = function() {
    return variables;
  };
}

这篇关于使用less.js获取更少的变量列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！