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

Question

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

我需要在页面上显示结果，有什么办法吗？

谢谢!

Answer 1

更新

正如@ertrzyiks 在评论中已经指出的那样，您应该将 less.parse 替换为 less.render对于 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();

另请参阅:How to detect and print changing variables LESS

但是自 Less v2 以来:

In the browser, less.pageLoadFinished will be a promise, resolved when less has finished its initial processing. less.refresh and less.modifyVars also return promises.

当你编译 filename.less 时，编译后的 CSS 代码已经被注入(inject)到 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>

在 HTML 的 body 部分:

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

另请参阅:Combining two .less files in one和 How to open a local disk file with Javascript?