如何检测和打印变化较少的变量 [英] How to detect and print changing variables LESS
问题描述
我想创建一个简单的脚本来更改LESS变量并在div中打印CSS输出.
I want to create a simple script that changes LESS variables and print the CSS output in a div.
这是我的HTML
<input type="text" id="choose-color" onchange="ModifyColorsInLess()">
<button onclick="writeCSS()">aggiorna</button>
<div id="lesscode"></div>
这是我的js
function writeCSS(){
var lessCode = '';
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.status === 200 && xmlhttp.readyState === 4){
lessCode = xmlhttp.responseText;
new(less.Parser)().parse(lessCode, function (e, tree) {
document.getElementById('lesscode').innerHTML = tree.toCSS().replace(/\n/g,"<br>");
});
}
};
xmlhttp.open("GET","css/styles.less",true);
xmlhttp.send();
}
function ModifyColorsInLess() {
less.modifyVars(
{
'@colore-body': $("#choose-color").val()
}
);
}
该脚本可以正确打印CSS代码，但是如果我在输入type ="text"中插入新的颜色值并调用writeCSS函数，它将不会打印我的变量edit. 我认为问题在于"modifyvar"不会更改文件"styles.less"，因此，当我调用函数writeCSS()时，不会检测到所做的更改. 有没有办法打印css来动态检测对Modifyvar所做的更改?
The script prints CSS code correctly, but if i insert a new color value in the input type="text" and call the writeCSS function, it doesn't print my variable edit. I think the problem is that "modifyvar" does not change the file "styles.less", so when I call the function writeCSS() does not detect changes made. is there a way to print the css dynamically detecting changes made with modifyvar?
推荐答案
update When you allow the compiled styles are directly applied on your page, you can simply call `modifyVars as follows:
<!DOCTYPE html>
<html>
<head>
<title>Less Example</title>
<script>
less = {
env: "development"
}
</script>
<link rel="stylesheet/less" type="text/css" href="t.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
<script>
function writeCSS(){
less.modifyVars({
'colore-body': document.getElementById('choose-color').value
});
}
</script>
</head>
<body>
<input type="text" id="choose-color">
<button onclick="writeCSS()">aggiorna</button>
<div id="lesscode"></div>
</body>
</html>
演示: http://plnkr.co/14MIt4gGCrMyXjgwCsoc
结束更新
基于如何显示浏览器中.less文件中的已编译CSS?，较少:通过编程方式(通过API)使用时传递选项(您还应阅读:
Based on How to show the compiled css from a .less file in the browser?, How to update variables in .less file dynamically using AngularJS and Less: Passing option when using programmatically (via API) (you should also read: http://lesscss.org/usage/#programmatic-usage) you should be able to use the code like that shown below:
<!DOCTYPE html>
<html>
<head>
<title>Less Example</title>
<script>
less = {
env: "development"
}
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
<script>
function writeCSS(){
var lessCode = '';
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
var options = {}
options['modifyVars'] = {'colore-body' : document.getElementById('choose-color').value}
lessCode = xmlhttp.responseText;
less.render(lessCode, options, function (error, output) {
if(!error) {
document.getElementById('lesscode').innerHTML = output.css;
}
else document.getElementById('lesscode').innerHTML = '<span style="color:red">' + error + '</span>';
});
}
};
xmlhttp.open("GET","styles.less",true);
xmlhttp.send();
}
</script>
</head>
<body>
<input type="text" id="choose-color">
<button onclick="writeCSS()">aggiorna</button>
<div id="lesscode"></div>
</body>
</html>
演示: http://plnkr.co/YbdtOwOeQPC1k9Vq4ZBv
And finally based on Force Cache-Control: no-cache in Chrome via XMLHttpRequest on F5 reload you can prevent caching of your source file with the following code:
xmlhttp.open("GET","t.less?_=" + new Date().getTime(),true);
在上面的env: "development"设置中，防止源文件缓存.要清除缓存，请在调用less.render之前先调用less.refresh(true).
In the above the env: "development" setting prevents your source files from caching. To clear the cache otherwise, you should call less.refresh(true) before your less.render call.
我还有另一个小问题，如果在我的较少文件中有一个参考 到另一个这样少的文件(@import"another.less")脚本不会 工作.
i have another little problem, if in my less file there is a reference to another less file like this(@import "another.less") script doesn't work.
确保上面的another.less与styles.less文件位于同一文件夹中.请注意，导入(当在浏览器中使用较少时)也将通过XMLHttpRequest进行读取.因此，导入的文件应可被浏览器读取，并且其路径应相对于styles.less文件.另请参见 http://lesscss.org/usage/#using-浏览器中的相对网址较少
Make sure that another.less in the above is in the same folder as your styles.less file. Notice that import (when using less in browser) are read with a XMLHttpRequest too. So your imported files should be readable by browser and their paths should be relative to the styles.less file. Also see http://lesscss.org/usage/#using-less-in-the-browser-relativeurls
这篇关于如何检测和打印变化较少的变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
