少-在客户端设置变量

LESS - set variables on the client side

本文关键字：设置 变量 客户端      更新时间：2023-09-26

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

为了演示，我想创建一个HTML页面，我可以把css网格的大小放在一个文本框中，网格会动态变化。这里是演示的开始:

http://jsfiddle.net/8QHNc/

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

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

我知道我可以在不使用LESS的情况下做到这一点(最好是使用jQuery等)-但我想既然它已经存在了…

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

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

到Less-Stylesheet。或者，使用jQuery，如您所建议的:

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

而使用像

这样的输入字段
<input type="text" id="inputLayoutWidth" value="720" />

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

如果您使用的是3。你也可以在javascript代码中设置它们

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

我不知道这个方法是否也存在于旧版本的less.

相关文章：