LESS - 在客户端设置变量答案

【问题标题】：LESS - set variables on the client sideLESS - 在客户端设置变量
【发布时间】：2020-08-31 01:01:55
【问题描述】：

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

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

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

这些可以在客户端使用较少的情况下完成吗？我可以以某种方式定义全局变量或将它们作为参数传递给less.js吗？

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

【问题讨论】：

【解决方案1】：

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

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

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

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

在使用类似的输入字段时

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

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

【讨论】：

谢谢你的回答——我不拒绝......我实际上在 JS 评估中玩过构建。我面临的问题是 - 忽略的值......请参阅：jsfiddle.net/PmDD3。 100px 值似乎总是被“”转义。 Firebug 显示： .box:after {content: "100px";} - 但 .box 元素的宽度始终被忽略或对浏览器无效。
抱歉重播晚了，一直很忙。我忘记了直接输出值的“~”，现在它是固定的，并且在输入框中完全采用了指定的宽度。请参阅link 但是，我不知道如何强制重新解析 less 脚本客户端（无需重新加载整个页面）。

【解决方案2】：

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

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

不知道老版本的less中是否也有这种方法。

【讨论】：