如何检测和打印变化的变量LESS(How to detect and print changing

我想创建一个简单的脚本，变化不变量和打印CSS输出一个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代码正确的，但如果我在输入型插入一个新的颜色值=“text”和调用writeCSS功能，它不打印我的变量编辑。我认为问题是，“modifyvar”不改变文件“styles.less”，所以当我调用函数writeCSS（）不检测所做的更改。有一个方法来打印的CSS动态检测与modifyvar所做的更改？

更新当你允许编译样式直接套用您的网页上，你可以简单地调用`modifyVars如下：

<!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？，如何更新动态使用AngularJS在.LESS文件变量和减：使用编程时传递的选项（通过API）（你也应该阅读： http://lesscss.org/usage/#programmatic-usage ），你应该能够使用这样的代码如下所示：

<!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

~~最后基于力的Cache-Control：通过XMLHttpRequest无缓存在Chrome上的F5重装就可以防止用下面的代码的源文件的缓存：~~

xmlhttp.open("GET","t.less?_=" + new Date().getTime(),true);

在上面的env: "development"设置可以防止您的源文件的缓存。要以其他方式清除缓存，你应该叫less.refresh(true)的less.render调用之前。

我还有一个小问题，如果我少的文件有像这样少的另一个文件的引用（@import“another.less”）脚本不起作用。

确保another.less在上面的是在同一个文件夹作为styles.less文件。请注意，进口（使用浏览器时少）太读取一个XMLHttpRequest。所以，你导入的文件应该是浏览器可读及其路径应该是相对于styles.less文件。另见http://lesscss.org/usage/#using-less-in-the-browser-relativeurls