Javascript 动态改变较少的变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7823204/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically changing less variables
提问by marvin
I want to change a less variable on client side. Say I have a less file
我想在客户端更改一个较小的变量。说我的文件少了
@color1: #123456;
@color2: @color1 + #111111;
.title { color: @color1; }
.text { color: @color2; }
I want that user yo pick a color and change the value of @color1 and recompile css without reloading the page.
我希望该用户选择一种颜色并更改 @color1 的值并重新编译 css 而不重新加载页面。
Basically I'm looking for a js function, something like this
基本上我正在寻找一个js函数，像这样
less_again({color1: '#ff0000'})
采纳答案by Moin Zaman
The creator of less.js added some features that should allow you to do something like this. Read the comments and the answers here: Load less.js rules dynamically
less.js 的创建者添加了一些应该允许你做这样的事情的功能。在此处阅读评论和答案：动态加载 less.js 规则
回答by Hakan Bilgin
Marvin, I wrote a function that does exactly what you're looking for, last night.
马文，昨晚我写了一个函数，它完全符合你的要求。
I have created a fork on Github; https://github.com/hbi99/less.js/commit/6508fe89a6210ae3cd8fffb8e998334644e7dcdc
我在 Github 上创建了一个分支； https://github.com/hbi99/less.js/commit/6508fe89a6210ae3cd8fffb8e998334644e7dcdc
Take a look at it. Since this is a recent addition, I'd like to hear your comments on the addition. This solution fits my needs perfectly and I think it will do the same for you.
看一看。由于这是最近添加的，我想听听您对添加的评论。这个解决方案完全符合我的需求，我认为它也会为你做同样的事情。
Here is a basic sample;
这是一个基本示例；
Sample LESS:
样品少：
@bgColor: black;
@textColor: yellow;
body {background: @bgColor; color: @textColor;}
From JS:
来自JS：
less.modifyVars({
'@bgColor': 'blue',
'@textColor': 'red'
});
回答by jfriend00
This less:
这少：
@color1: #123456;
@color2: @color1 + #111111;
.title { color: @color1; }
.text { color: @color2; }
compiles to this CSS and this is all the browser knows about:
编译成这个 CSS，这是浏览器所知道的所有信息：
.title { color: #123456; }
.text { color: #234567; }
So, now you're effectively saying you want to change dynamically to this:
所以，现在您实际上是在说您想动态更改为：
.title { color: #ff0000; }
You can do that by reaching into the existing stylesheet with JS and changing the rule for .title. Or, you can define an alternate rule in your original CSS:
您可以通过使用 JS 访问现有样式表并更改.title. 或者，您可以在原始 CSS 中定义替代规则：
.alternate.title { color: #ff0000; }
And, find all the objects with .title and add .alternate to them. In jQuery, this would be as simple as:
并且，找到所有带有 .title 的对象并将 .alternate 添加到它们。在 jQuery 中，这很简单：
$(".title").addClass(".alternate");
In plain JS, you'd need to use a shim to provide getElementsByClassName in a cross browser fashion and then use:
在纯 JS 中，您需要使用 shim 以跨浏览器的方式提供 getElementsByClassName，然后使用：
var list = document.getElementsByClassName("title");
for (var i = 0, len = list.length; i < len; i++) {
list[i].className += " alternate";
}
