CODEWITHSUNDEEP
cssless
Cameron
Cameron

Reputation: 28783

Show CSS created from Less.js

Is it possible to display the CSS that Less.js generates?

I have the following page:

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

The CSS is working fine, but I want to see what the 'actual' generated CSS file looks like. I can't see anything in the object less that seems to contain it...

Upvotes: 0

Views: 550

Answers (3)

Stoyan Kostov
Stoyan Kostov

Reputation: 451

Read the Browser Options 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>

Make sure the dumpLineNumbers is set to "comments",

Open the DOM explorer of your browser(In my case Firefox -> FireBug) and in <head> look for <style id="less:User...." >. There is your CSS with comments, lines and files where the generated CSS rules come from.

Upvotes: 0

AlbumCat
AlbumCat

Reputation: 11

Use vLESSlook tool (js/vlesslook.js and css/vlesslook.css). See readme - this not only for Python / Django - JavaScript and CSS you can use anywhere..

Upvotes: 1

Olaf Dietsche
Olaf Dietsche

Reputation: 74018

From LESS - The dynamic stylesheet language.

Debugging
It is possible to output rules in your CSS which allow tools to locate the source of the rule.
Either specify the option dumpLineNumbers as above or add !dumpLineNumbers:mediaQuery to the url.
You can use the “comments” option with FireLESS and the “mediaQuery” option with FireBug/Chrome dev tools (it is identical to the SCSS media query debugging format).

A quick glance through https://github.com/less/less.js/blob/master/dist/less-1.5.1.js shows function createCSS(styles, sheet, lastModified) in line 6344. From this function, I would say less creates a style element, where the resulting CSS is placed. So, something like this might work 

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

JSFiddle

Upvotes: 3

Related Questions