Parse Less Client Side

Parse LESS client side

A look at the less.js source brings up the Parser object. Assuming that less.js is included in the page:

var data = "@colour: red; #example { background-color: @colour; }",
    parser = new less.Parser({});

parser.parse(data, function (error, root) { 
    // code that handles the parsed data here...
    // e.g.:
    console.log( root.toCSS() ); 
});

will output the following to the console:

#example {
  background-color: #ff0000;
}

The constructor for less.Parser actually takes series of settings, and I don't understand enough of the internals of LESS to say what might be good to pass (though they are all optional so passing none should just use the defaults).

The Parser.parse method takes two parameters: a string containing the LESS file, and a callback that handles the parsed data. The callback receives up to two parameters, an error object (error) and an object representing the parsed LESS (root). root isn't passed if there was a fatal error, and error will be null if there was no error.

Unfortunately, I can't find any better documentation on the attributes of the error parameter than the place they are set in the source here.

Less doesn't work on compiled client-side

I think the differences in output you're seeing are due to these compilers using different versions of the LESS spec. Previous versions current versions of LESS (thanks @seven-phases-max) allow variables created in mixins to be used throughout the whole document ('global scope').

You've created the @colorx variable inside of a mixin. To make your code work in a compiler using version 1.4.x, you either need to set your @colorx variable outside the mixin, so it has global scope, or apply the colour to .text by using the mixin.

Here's an example demonstrating variable scope LESS in a compiler (currently) running an older compiler
So I guess you have a couple of options.

Option one, keeping using the old compiler and change your mixin to this:

.setColor(){
    @colorx:"yellow";
    color: @colorx;
}

.text {
    .steColor();
    font-size:20px;
}

Or, drop set colour all together, and declare the @colorx:"yellow"; variable in the body of your less file.

Or lastly, as @seven-phases-max has pointed out, your code works in the current versions of the compiler, so you could switch to a more up-to-date compiler and use your code as-is.

Running LESS server-side vs. client-side

On the server, you have to take more care with your cache control headers and you sacrifice a bit of CPU power.

On the client, it breaks if JS isn't available.

(For your production systems,) do it at build time and just serve up static CSS. That's efficient and reliable.

Using CakePHP HTML Helper to compile .less client-side

the html helper will check if there's a "?" in the filename.. if there isn't, it adds ".css" at the end:

cake/libs/view/helpers/html.php (ln. 356)

if (strpos($path, '?') === false) {
    if (substr($path, -4) !== '.css') {
    $path .= '.css';
    }
}

maybe you can trick the helper with something like this:

<?php echo $this -> Html -> css('lib/style.less?'); ?>

but I'm not sure if it will work... you might have to write the tag manually =P

Cheers

---

Related Topics