Question

我想创建一个简单的脚本来更改LESS变量并在div中打印CSS输出。

这是我的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函数，它就不会打印我的变量编辑。我认为问题是“modifyvar”不会改变文件“styles.less”，所以当我调用函数时，writeCSS（）不会检测所做的更改。有没有办法打印css动态检测使用modifyvar进行的更改？

Answer 1

<强>更新当您允许已编译的样式直接应用于您的页面时，您只需按以下方式调用`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

结束更新

基于How to show the compiled css from a .less file in the browser?，How to update variables in .less file dynamically using AngularJS和Less: Passing option when using programmatically (via 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

~~最后基于Force Cache-Control: no-cache in Chrome via XMLHttpRequest on F5 reload，您可以使用以下代码阻止缓存源文件：~~

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

<击>

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

我还有另外一个小问题，如果在我的文件中有一个引用到另一个这样的文件（@import“another.less”）脚本没有工作

确保上面的another.less与styles.less文件位于同一文件夹中。请注意，使用XMLHttpRequest也会读取导入（在浏览器中使用较少时）。因此，导入的文件应该可以被浏览器读取，并且它们的路径应该相对于styles.less文件。另请参阅http://lesscss.org/usage/#using-less-in-the-browser-relativeurls

如何检测和打印变化的变量LESS

1 个答案: