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

Question

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

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

但我想得到所有这些，比如(不工作):

var variables = less.getVars();

Answer 1

这将是一个非常规的答案，因为该数据似乎并未作为面向浏览器的 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 行的 return result 之前添加以下调用 exposeVars(evaldRoot)。

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

免责声明:这样做不是一个好主意!如果您只是玩玩、调试或测试一些东西，这很好，但不要依赖这个 hack 来做任何严肃的事情!

---

这里的基本目标是在源代码中找到将 .less 文件转换为抽象语法树(或其他形式结构)的点。

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

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

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

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

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

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