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

• 在线~2556 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;
  };
}