Show CSS created from Less.js

Question

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

Would using a pre-processor be a possibility ? I mean you could process less file on your local machine to see it, and either put the generated CSS online, either keep on "compiling" it client-side. — Laurent S.
– Laurent S., Commented Dec 3, 2013 at 11:06
I will be doing. I just want to see it with the Less.js version that's all. — Cameron
– Cameron, Commented Dec 3, 2013 at 11:07
I may be missing something, but aren't you suppose to do some kind of action to initiate client-side "compilation" ? Or is it done automatically upon inserting the less.js file ? Cause your less object looks just like settings... — Laurent S.
– Laurent S., Commented Dec 3, 2013 at 11:20

Olaf Dietsche · Accepted Answer · 2013-12-03 11:28:09Z

3

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

answered Dec 3, 2013 at 11:28

Olaf Dietsche

74.4k9 gold badges113 silver badges214 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cameron Over a year ago

Boom :) Thanks that's exactly what I want.

AlbumCat · Accepted Answer · 2014-02-02 21:12:34Z

1

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

answered Feb 2, 2014 at 21:12

AlbumCat

111 bronze badge

Comments

Stoyan Kostov · Accepted Answer · 2014-06-26 12:14:20Z

0

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.

edited Jun 26, 2014 at 12:14

answered Jun 26, 2014 at 9:20

Stoyan Kostov

4514 silver badges4 bronze badges

Collectives™ on Stack Overflow

Show CSS created from Less.js

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related