CODEWITHSUNDEEP
less
montrealmike
montrealmike

Reputation: 11631

How to show the compiled css from a .less file in the browser?

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?

THanks!

Upvotes: 3

Views: 4858

Answers (3)

Bass Jobsen
Bass Jobsen

Reputation: 49044

update

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();

see also: How to detect and print changing variables LESS

But since Less v2:

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.

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);
    }
);

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

--end update

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>

With in the body section of your HTML:

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

See also: Combining two .less files in one and How to open a local disk file with Javascript?

Upvotes: 5

cchana
cchana

Reputation: 5000

You have two options to do this, Internet Explorer or Firefox.

Let's start with Firefox. If you install the web developer toolbar, you get a menu option that's labelled CSS. Clicking on this gives you a few options and if you choose View CSS, you are taken to a new tab that shows you all of the styles for the page, grouped by their location and you should see a section with the CSS that has been generated by LESS and dynamically applied to the elements.

IE also has a Web Developer option and if you use the toolbar to inspect an element, you can then use the short cut 'Ctrl + T' which will bring up the page source with the computed styles.

The Firefox solution is better, as you can see exactly which styles have been provided by LESS whereas IE just lumps it all together.

There is a third option, and that is to compile the CSS server side!

Upvotes: 0

Stian
Stian

Reputation: 45

I just use Chrome's Inspect Element.

Right click on the element CSS you are looking for, Right click and choose Inspect element. On the right you will find the compiled CSS in Styles. Hope it helps

Upvotes: 0

Related Questions