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

【问题标题】：How to detect and print changing variables LESS如何检测和打印变化的变量 LESS
【发布时间】：2021-07-30 03:49:53
【问题描述】：

我想创建一个简单的脚本来更改 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 所做的更改？

【问题讨论】：

在您的 sn-p 中，modifyVars 选项应传递给 parse 函数 (see for example)。全局 less 对象的 modifyVars 仅适用于该全局 less 在页面加载时自动评估的那些较少文件。 new(less.Parser)() 对象实际上是一个 new 解析器对象，它没有从文档的全局 less 继承任何内容。
我是 less.js 的新手...如何使用您的建议重写我的脚本？
某事like this 可能（未优化）。我实际上并没有测试它是否有效（我只是没有任何 Less 1.x 沙箱，因为我刚刚切换到 v2.x））。

标签： javascript jquery css less

【解决方案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)。

我还有一个小问题，如果在我的 less 文件中有参考到另一个像这样的更少文件（@import“another.less”）脚本没有工作。

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

【讨论】：

太棒了！太感谢了！！！我还有一个小问题，如果在我的 less 文件中有对另一个像这样的 less 文件的引用（@import "another.less") 脚本不起作用。在检查器网站上，我看到这样的错误消息（资源文件失败）。如果我使用单个文件 .less 脚本效果很好...有什么解释吗？
路径正确...使用 mozilla 我收到此警告：“由于对用户体验的负面影响，不推荐使用主线程上的请求同步 XMLHttpRequest。有关更多信息，请参阅xhr.spec.whatwg.org “也许是问题所在……
我不认为这是无法访问您的文件的原因，另请参阅github.com/less/less.js/issues/2384