javascript - LESS - 在客户端设置变量

Question

我已经创建了一个简单的 css 网格解决方案 (http://lesscss.org/) 的 LESS (http://simplegrid.info/) 版本。现在我可以愉快地使用来自 LESS (lessc) 的服务器脚本滚动我自己的网格大小。这对我有用。

出于演示目的，我想创建一个 HTML 页面，我可以在其中将 css 网格的大小放在文本框中，并且网格会动态变化。演示的开始在这里:

http://jsfiddle.net/8QHNc/

所以不要改变 @layoutwidth: 720px;在<style rel="stylesheet" type="text/less" >部分我想将这些变量传递给 LESS 解释器。

这些可以通过客户端使用 less 来完成吗？我可以定义全局变量或以某种方式将它们作为参数传递给 less.js 吗？

我知道我可以在不使用 LESS 的情况下做到这一点(最好使用 jQuery o. sth.) - 但我想因为它已经存在了......

Answer 1

我不知道解析器是否接受任何参数，但为什么你会拒绝使用内置的 javascript 评估，例如添加类似的内容:

@layoutwidth: `document.getElementById("inputLayoutWidth") + "px"`;

到你的 Less-Stylesheet。或者，按照您的建议使用 jQuery:

@layoutwidth: `$("#inputLayoutWidth").val() + "px"`;

在使用像这样的输入字段时

<input type="text" id="inputLayoutWidth" value="720" />

并在每次更改输入字段时调用解析。