LESS在客户端设置变量 [英] LESS - set variables on the client side

问题描述

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

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

http ：//jsfiddle.net/8QHNc/

因此，不要改变 @layoutwidth：720px; 在< style rel =stylesheettype =text / less> 部分我想将这些变量传递给LESS解释器。

这可以用客户端使用less吗？我可以定义全局变量或将它们作为参数传递给less.js吗？

我知道我可以做到这一点没有使用LESS（最好用jQuery o。 sth。） - 但我想，因为它已经在那里...

解决方案

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

  @layoutwidth：`document.getElementById（inputLayoutWidth）+px`; 
  

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

  @layoutwidth：`$（＃inputLayoutWidth）。val px`; 
 

。

 < input type =textid =inputLayoutWidthvalue =720/> 
  

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

I have created a LESS (http://lesscss.org/) version of a simple css grid solution (http://simplegrid.info/. Now I can happily roll my own grid sizes with the server script from LESS (lessc). That's working for me.

For demo purposes I would like to create a HTML page, where I can put the size of the css grid in a textbox and the the grid would change dynamically. Beginning of the demo is here:

http://jsfiddle.net/8QHNc/

So instead of changing @layoutwidth: 720px; in the <style rel="stylesheet" type="text/less" > section I would like to pass these variables to the LESS interpreter.

Can these be done with the client side usage of less? Can I define global variables or pass them as parameters to less.js somehow?

I am aware that I could do this without the usage of LESS (preferably with jQuery o. sth.) - but I figured since it is already there...

解决方案

I do not know if the parser takes any arguments, but why would you refuse to use the built-in javascript evaluation, e.g. adding something like:

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

to your Less-Stylesheet. Or, using jQuery, as you proposed:

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

while using an input field like

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

and invoke parsing each time the input field is changed.

这篇关于LESS在客户端设置变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！