Question

是否可以显示Less.js生成的CSS？

我有以下页面：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Less</title>
        <link rel="stylesheet" type="text/less" href="test.less">
        <script type="text/javascript">
            less = {
                env: "development", // or "production"
                async: false,       // load imports async
                fileAsync: false,   // load imports async when in a page under
                                    // a file protocol
                poll: 1000,         // when in watch mode, time in ms between polls
                functions: {},      // user functions, keyed by name
                dumpLineNumbers: "comments", // or "mediaQuery" or "all"
                relativeUrls: false,// whether to adjust url's to be relative
                                    // if false, url's are already relative to the
                                    // entry less file
                rootpath: ":/a.com/"// a path to add on to the start of every url
                                    //resource
            };
        </script>
        <script src="less-1.5.0.min.js" type="text/javascript"></script>
    </head>
    <body class="default">

        <script>

            console.log(less);

        </script>

    </body>
</html>

CSS工作正常，但我想看看'实际'生成的CSS文件是什么样的。我在对象less中看不到任何似乎包含它的内容......

Answer 1

来自LESS - The dynamic stylesheet language.

<强>调试
可以在CSS中输出规则，允许工具找到规则的来源如上所述指定选项dumpLineNumbers或将！dumpLineNumbers：mediaQuery添加到url 您可以使用FireLESS的“comments”选项和FireBug / Chrome开发工具的“mediaQuery”选项（它与SCSS媒体查询调试格式相同）。

快速浏览https://github.com/less/less.js/blob/master/dist/less-1.5.1.js在第6344行显示function createCSS(styles, sheet, lastModified)。从这个函数中，我会说less创建一个style元素，放置生成的CSS。所以，这样的事情可能会起作用

var css = $('style').text();
console.log(css);

JSFiddle

Answer 2

使用vLESSlook工具（js / vlesslook.js和css / vlesslook.css）。请参阅readme - 这不仅适用于Python / Django - 您可以在任何地方使用的JavaScript和CSS ..

Answer 3

阅读浏览器选项 http://lesscss.org/#client-side-usage

<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js"></script>

确保dumpLineNumbers设置为"comments",

打开浏览器的DOM浏览器（在我的情况下是Firefox - ＆gt; FireBug），在<head>中查找<style id="less:User...." >。您的CSS中包含生成的CSS规则来自的注释，行和文件。

显示从Less.js创建的CSS

3 个答案: