Using LESS on a WordPress site, my thoughts

Posted by .

To use LESS in your WordPress theme you seem to have two options: Use something like wp-less to compile your LESS files into CSS, all done server-side using PHP, with caching taken care of as not to go through that process on every page load. Or use less.js to compile the LESS into CSS in your clients browser.

On a live site it’s probably best to do your visitors a favour and take care of the LESS compiling server-side. I thought it might be better to do this client side when building a website as it might be easier to debug. Thinking all LESS files would be compiled in the browser and then Chrome inspector would know which LESS file contained the style declaration I was looking for.

So I forked the wp-less plugin/class and added a method to choose client-side (less.js) compiling. Just incase Sanchothefat wanted to pull my changes back into his repo I added my changes in such a way that the default usage of that class is still the same but now you can make use of a different method to enable the client-side (less.js) compile. Simply include the class in your theme like so:

// Include the wp-less class
require_once( 'library/wp-less/wp-less.php' );
 
// Hook into init and tell wp_less to use_js method
// Comment out this line if you would rather use the default PHP compiler
add_action( 'init', array( 'wp_less', 'use_js' ), 20 );

The less.js compiler works fine and means you can even make use of the watch mode to automatically refresh the stylesheets once a change has been detected in your .less file. It would seem this only works if less.js can detect you’re using a dev environment by checking the website is on localhost or requested through a non standard port. Unfortunately I’m not running the site on localhost so couldn’t give watch mode to work. It turns out Chrome inspector doesn’t indicate which less style a file is associated to. It was a bit of a long shot anyway, hopefully one day the chrome inspector will support less.

So the only downside I see to using LESS is the Chrome inspector isn’t as easy to use since the styles you see in the inspector won’t necessarily match the definitions you have in your LESS files.

I think the main use of the Chrome inspector when editing CSS is the instant feedback you get when tweaking css. I’ve been slowly working on a web based code editor for WordPress and I created a “concept” live CSS editor where CSS changes saved in WPide were pushed into another browser window which could be used for a sort of live preview of CSS changes.

The difference with my implementation that I’ve not really seen done in this way before is that there were no extra calls to the server to check if the CSS had been updated. Instead both WPide and the live preview webpage communicated over COOKIE in the local browser. The live webpage checked for incoming CSS data and when it detected new data it refreshed the browsers CSS.

I’m not sure what I did with the code for that but I’m going to dig it out and try make use of it to add live CSS/LESS editing with WPide. I want it to work on a live site with CSS/LESS changes being pushed automatically to the live preview without any trips back to the server and because this could all be done locally the changes wouldn’t actually be live on your website but it would be a realtime preview of the actual site.

The following are pretty much a snippets/notes that may help me achieve live editing of LESS files

Need to look into using localStorage as well as cookies for exchanging data/css between browser windows.

Livereload looks like it gives you pretty much live editing of CSS, SASS, LESS and images if you’re working locally.

Drupal seem to have live CSS/LESS editing.

A quick JavaScript way (using less.js and localStorage) to check for new css and recompile:

localStorage.clear();
less.refresh();

The LESS compiler caches LESS files in your browsers local storage which will cause the refresh() method not to detect changes to @imported LESS files. Which is why the localStorage.clear() method is used, clearing those cached files so all LESS changes are picked up. It’s not the best way to go about this as it clears all of your local storage which may wipe out other data that you do want to keep.

Here is a function that could be used to clear only the required keys from the local storage:

function destroyLessCache(pathToCss) { // e.g. '/css/' or '/stylesheets/'
 
  if (!window.localStorage || !less || less.env !== 'development') {
    return;
  }
  var host = window.location.host;
  var protocol = window.location.protocol;
  var keyPrefix = protocol + '//' + host + pathToCss;
 
  for (var key in window.localStorage) {
    if (key.indexOf(keyPrefix) === 0) {
      delete window.localStorage[key];
    }
  }
}

One Response to “Using LESS on a WordPress site, my thoughts”

  1. simon

    Just thought I’d mention I haven’t exactly tested my fork of WP-less on more than a basic theme with hardly any graphics (this site). I have a feeling some additional work may be needed for image references.