Load Less.Js Rules Dynamically

Load less.js rules dynamically

I just pushed 1.0.31 — it has a method: less.refreshStyles() which will re-compile <style> tags with type="text/less" — try it out and let me know if it works.

Dynamically changing less variables

The creator of less.js added some features that should allow you to do something like this. Read the comments and the answers here: Load less.js rules dynamically

LESS (dynamic style sheet language) and Resource Loaders

Yes you can.

Reading this post Load less.js rules dynamically and adjusting it a bit:

less.sheets.push(document.getElementById('new-style-1'));
// Add the new less file to the head of your document    
var newLessStylesheet = $("<link />").attr("id", "new-style-1").attr("href", "/stylesheets/style.less").attr("type", 'text/less');
$("head").append(newLessStylesheet);
// Have less refresh the stylesheets
less.refresh(true);

You could also generate all the CSS in your development environment and put it in one file.
There are lots of options. The easiests way would be to use an application. You could use apps like http://incident57.com/less/ for Mac. You can even compile online: Search for something as "lessphp".

dynamically change LESS variables in page with JavaScript

Instead of doing the variable replacing client-side, since I was doing it in a Rails app anyway, I moved it server-side. I'm using the Ruby bindings for LESS to parse some LESS that includes my custom variables, rendering the parsed result with content_type: 'text/css' and using an AJAX request to add a stylesheet link to the rendered CSS.

less.js load impact

You can check load time with Firebug (you will exactly see what takes how long to load).

Additionally there is still the option that you compile your .less to .css locally or even do it online before you put it on the site.

EDIT:

Here is what I get trying benchmark.less on my local server:

less: parsed hxxp://localhost/testing/css/style.less successfully.
less: saving hxxp://localhost/testing/css/style.less to cache.
less: css for hxxp://localhost/testing/css/style.less generated in 640ms
less: css generated in 641ms

p.s. No matter what the load impact is, I would still compile it to css before you put it online, otherwhise people with JS disabled will get nothing.

---

Related Topics