Javascript 使用less.js获取较少的变量列表

我正在使用客户端less.js。是否有一种方法可以从我的less文件中获取所有变量。我知道如何修改变量：

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

但我想得到所有这些，比如（不起作用）：

---

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

---

tl；dr

• 保存

  less.js

  文件的本地副本
• 在某处添加此函数定义

  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;
  }
  

• 在第2556行的

  返回结果之前添加以下调用
  exposeVars（evaldRoot）
  

• 现在

  less.variables

  包含文件中的所有变量

免责声明：这样做不是一个好主意！如果你只是在玩，调试或测试一些东西，这是很好的，但是不要依赖于这个黑客来做任何严肃的事情

---

这里的基本目标是在源代码中找到将

.less

文件转换为抽象语法树（或其他形式结构）的点

直接跳进源代码，我发现了一个

ParseTree

类。猜测它将包含解析less文件的结果是合理的假设

我编写了一个快速测试文件，并用适当的标记将其添加到浏览器中。看起来是这样的：

@myvar: red;
@othervar: 12px;

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

我已经下载了的本地副本，并在第2556行添加了一个断点

我在局部范围内进行了一番探索，以查看可用的内容，并在名为

evaldRoot

的对象中找到了变量

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

下一项工作是找出这些数据的去向。似乎

evaldRoot

变量用于生成结果CSS（这很有意义，因为它包含变量等信息）

无论发生什么情况，变量在作为

result.CSS

生成CSS字符串后都会超出范围

要公开这些变量，脚本需要做一些小的修改。你必须以某种方式公开这些变量。这里有一个这样做的例子

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;
}

这可以添加到带有断点的return语句之前

exposeVars(evaldRoot);
return result;

现在变量将在全局

less

对象上的

name:value

对象中可用

您甚至可以修改expose函数，从调用

less.getVars（）

返回变量。就像你最初的建议一样

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

---

所有变量都以

@

开头，不知道less是否提供了一些功能，但您几乎可以执行一个正则表达式并找到所有变量的位置？我需要将它们加载到变量中，例如，嗯，我不明白为什么这个可能不理想但仍然完全有效的问题被搁置。至少有一位亲密的选民知道什么是少吗？我投票赞成重新开张。@7阶段最多可能与此有关。

exposeVars(evaldRoot);
return result;

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