如何在浏览器中显示.less文件中编译的css？

Question

在客户端中使用less.js编译的文件显示生成的css的最佳方法是什么.换句话说,我如何用生成的css填充div？

我需要在页面上显示结果,无论如何做到这一点？

谢谢!

Answer 1

更新

正如@ertrzyiks在评论中已经指出的那样,你应该用Less.render替换less.parse for Less v 2.x:

var lessCode = '';
var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function(){
  if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
    var options = {}
    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","important.less",true);
xmlhttp.send();

另见:如何检测和打印变化的变量

但是因为Less v2:

在浏览器中,less.pageLoadFinished将是一个promise,在less完成其初始处理时解析.less.refresh和less.modifyVars也返回承诺.

当您编译filename.less已编译的CSS代码时已注入style标记id less:filename,因此要获得编译的CSS代码,您还可以使用:

less.pageLoadFinished.then(
    function() {
        console.log(document.getElementById('less:filename').innerHTML);
    }
); 

请注意,最后一个示例也在页面上应用已编译的CSS代码.

- 更新

我期望运行如下的内容是可能的:

    <link rel="stylesheet/less" type="text/css" href="important.less">
    <script src="less-1.7.3.js" type="text/javascript"></script>

    <script>
    css = less.tree.toCSS();
    console.log(css);
    </script>

不幸的是,这不起作用,但您可以使用以下代码来获得您想要的:

    <script src="less-1.7.3.js" type="text/javascript"></script>
    <script>
    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","important.less",true);
    xmlhttp.send();
    </script>

在bodyHTML 的部分中:

<div id="lesscode"></div>

另请参阅:将两个.less文件合并为一个以及如何使用Javascript打开本地磁盘文件？