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

Question

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

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

但我希望得到所有这些，比如（不要工作）：

var variables = less.getVars();

Answer 1

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

<强> TL;博士

• 保存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;
  }
  

• 在{25}行exposeVars(evaldRoot)之前添加以下电话return result。

• 现在less.variables包含文件中的所有变量。

免责声明：这样做不是个好主意！如果您只是在玩游戏，调试或测试某些内容，那就没关系了，但是不要因为任何严重的问题而依赖这个黑客！

这里的基本目标是在源中找到.less文件转换为抽象语法树（或其他一些正式结构）的点。

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

我写了一个快速测试文件并将其添加到具有相应标记的浏览器中。它看起来像这样：

@myvar: red;
@othervar: 12px;

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

我已下载less.js的本地副本，并在第2556行添加了断点。

我在本地范围内找到了可用的内容，并在名为evaldRoot的对象中找到了变量。

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

接下来的工作是弄清楚这些数据的去向。似乎evaldRoot变量用于生成生成的CSS（这有意义，因为它包含变量等信息）。

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

无论发生什么，变量在用于生成CSS字符串result.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;

现在变量将在全局name: value对象的less对象中可用。

您甚至可以修改expose函数以将变量从调用返回到less.getVars()。就像你最初的建议一样。

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