使用JavaScript动态更改页面中的LESS变量 [英] dynamically change LESS variables in page with JavaScript

问题描述

我正在尝试使用 less.js 通过JavaScript动态修改LESS变量.但是，我似乎无法使其与modifyVars，watch或refresh一起使用.

I'm trying to use less.js to modify LESS variables dynamically with JavaScript. However, I can't seem to get it to work with modifyVars, watch, or refresh.

我尝试使用less.modifyVars({'@bg': '#00ff00'})在加载less.js之前放置样式表链接标记，但是背景没有变化.我使用的较少文件很简单:

I tried putting the stylesheet link tag before loading less.js, using less.modifyVars({'@bg': '#00ff00'}), but no change occurs to the background. The less file I'm using is simple:

@bg: #000;
body { background-color: @bg; }

我还尝试将样式表链接标记放在less.js之后，如这个问题，先使用less.sheets.push($('#less-link')[0])，然后先调用modifyVars，然后再调用refresh.背景颜色无变化.

I also tried putting the stylesheet link tag after less.js, as mentioned in this question, and using less.sheets.push($('#less-link')[0]) followed by a call to modifyVars and then refresh. No change in the background color.

我还尝试注释掉LESS文件中的@bg: #000;，然后通过modifyVars对其进行设置.运气不好:我最终得到了Less::ParseError: variable @bg is undefined.

I also tried commenting out the @bg: #000; in the LESS file, then setting it via modifyVars. No luck: I end up with a Less::ParseError: variable @bg is undefined.

如何动态更改LESS变量并更新页面外观以反映这些更改?

How can I dynamically change LESS variables and have the page appearance update to reflect those changes?

嗯，这可能是Rails发生的魔法.当我加载较少的文件时，变量定义不见了，而我所看到的只是body { background-color: #000; }.当我切换到使用嵌入页面中的LESS的<style type="text/less">块并使用此替代LESS JavaScript ，则可以使用less.Override('@bg', '#00ff00')更改变量，并且页面的背景颜色立即更改.感谢此答案.现在，我将使用<style>标记而不是<link>与less.js进行尝试.

hm, this may be some Rails magic happening. When I loaded my less file, the variable definition was gone and all I saw was body { background-color: #000; }. When I switched to using a <style type="text/less"> block of LESS embedded in the page and used this override LESS JavaScript, I was able to change a variable with less.Override('@bg', '#00ff00') and the page's background color immediately changed. Thanks to this answer. Now I'll try it with less.js using the <style> tag instead of <link>.

看起来小于1.3.3.min.js希望将LESS加载到link标记中-当我尝试使用modifyVars时，我得到了TypeError: Cannot read property 'href' of undefined页面看起来像这样:

looks like less-1.3.3.min.js wants LESS to be loaded in link tags--I get TypeError: Cannot read property 'href' of undefined when I try to use modifyVars and my page looks like this:

<style type="text/less">
@bg: #000;
body {
  background-color: @bg;
}
</style>
<script src="/assets/less-1.3.3.min.js?body=1" type="text/javascript"></script>

推荐答案

由于未在客户端替换变量，因此无论如何我都是在Rails应用程序中进行操作，因此将其移至服务器端.我正在使用 Ruby的LESS绑定来解析一些包含我的自定义内容的LESS变量，使用content_type: 'text/css'呈现解析的结果，并使用AJAX请求将样式表链接添加到呈现的CSS.

Instead of doing the variable replacing client-side, since I was doing it in a Rails app anyway, I moved it server-side. I'm using the Ruby bindings for LESS to parse some LESS that includes my custom variables, rendering the parsed result with content_type: 'text/css' and using an AJAX request to add a stylesheet link to the rendered CSS.

这篇关于使用JavaScript动态更改页面中的LESS变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！