LESS - 在客户端设置变量

Question

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

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

http://jsfiddle.net/8QHNc/

因此，我希望将这些变量传递给LESS解释器，而不是更改@layoutwidth: 720px;部分中的<style rel="stylesheet" type="text/less" >。

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

我知道我可以在不使用LESS的情况下做到这一点（最好是使用jQuery o ......某事） - 但我想，因为它已经存在了......

Answer 1

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

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

到您的Less-Stylesheet。或者，使用jQuery，如你所提议：

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

使用输入字段，如

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

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

Answer 2

如果您使用的CSS少于3.x版本，那么您也可以在javascript代码中设置它们。

 less.modifyVars({
   '@buttonFace': '#5B83AD',
   '@buttonText': '#D9EEF2'
});

我不知道这种方法是否也存在于旧版本的less中。