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

在客户端中用less.js编译的文件显示结果css的最佳方式是什么。 换句话说，如何用结果css填充div

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

---

谢谢

我只使用了Chrome的检查元件

---

右键单击您要查找的CSS元素，右键单击并选择检查元素。在右边，您可以找到样式中编译的CSS。希望它能帮助你，你有两个选择，Internet Explorer或Firefox

让我们从Firefox开始。如果安装，则会得到一个标有CSS的菜单选项。点击这个按钮会给你一些选项，如果你选择查看CSS，你会被带到一个新的选项卡，它会显示页面的所有样式，按它们的位置分组，你会看到一个带有CSS的部分，该CSS是由LESS生成的，并动态应用于元素

IE还有一个WebDeveloper选项，如果您使用工具栏来检查一个元素，那么您可以使用快捷键“Ctrl+T”，它将显示带有计算样式的页面源

Firefox解决方案更好，因为您可以确切地看到LESS提供了哪些样式，而IE只是将其综合在一起

---

还有第三种选择，那就是编译CSS服务器端

更新

正如@ertrzyiks在评论中指出的，您应该将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();

请注意，最后一个示例还应用了页面上编译的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>

---

另请参见：和

很抱歉，我的问题不清楚，我需要在页面上显示结果，有什么方法可以做到这一点吗？为什么仍然有LINK元素？它在那里是偶然的，不再需要了。在Less v2中，您有较少的.render（）方法可以做到这一点，请参见此嘿，您能帮助我吗？？我想从浏览器中的.less文件中隐藏已编译的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>

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