How to detect and print changing variables LESS

问题

I want to create a simple script that changes LESS variables and print the CSS output in a div.

this is my HTML

<input type="text" id="choose-color" onchange="ModifyColorsInLess()">
<button onclick="writeCSS()">aggiorna</button>
<div id="lesscode"></div>

This is my 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()
    }
  );
}

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?

回答1:

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>

Demo: http://plnkr.co/14MIt4gGCrMyXjgwCsoc

end update

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>

demo: 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);

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.

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.

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

来源：https://stackoverflow.com/questions/29437697/how-to-detect-and-print-changing-variables-less

标签

javascript

jquery

css

less

less.js