如何从浏览器中的.less文件显示已编译的CSS? [英] How to show the compiled css from a .less file in the browser?

问题描述

从客户端中用 less.js 编译的文件中显示结果CSS的最佳方法是什么. 换句话说，如何将生成的CSS填充到div中?

What is the best way to show the resulting css from files compiled with less.js in the client. In other words, how can i fill a div with the resulting css?

我需要在页面上显示结果吗?

I need to display the result on the page, any way to do this?

谢谢！

推荐答案

更新

正如@ertrzyiks在评论中所指出的那样，您应该将 less.render for Less v 2.x:

As already pointed out in the comments by @ertrzyiks you should replace less.parse with less.render 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:

But since Less v2:

在浏览器中，less.pageLoadFinished将是一个承诺，将在以下情况解决 Less较少完成其初始处理. less.refresh和 less.modifyVars还返回承诺.

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代码注入到带有id less:filename的style标记中，因此，也可以使用以下代码来获取编译后的CSS代码:

When you compile filename.less the compiled CSS code has been inject in a style tag with id less:filename, so to get the compilled CSS code you can also use:

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

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

Notice that the last example also applies the compiled CSS code on the page.

-结束更新

我希望可以执行以下操作:

I expected that running something such as the following was possible:

    <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>

不幸的是，这不起作用，但是您可以使用以下代码来获取所需的内容:

unfortunately this does not work, but you can use the following code to get what you want:

    <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部分中使用:

With in the body section of your HTML:

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

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

这篇关于如何从浏览器中的.less文件显示已编译的CSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！