For the uninitiated, LessCSS is a powerful extension of CSS, that adds variables, mixins, operations and nested rules.
What this means is the ability to remove the repetition and redundancy which almost always pops up in CSS for complex web sites. Just the addition of variables is a god-send towards this, but other features like the addition of operations makes support each browser’s “-moz-xxx” or “-webkit-xxx” properties, plus the standard ones go from 3+ lines to 1 line of CSS. This improves the signal-to-noise ratio of the CSS dramatically.
After having used LessCSS for a while now, I honestly wouldn’t go back to using straight CSS again.
So… my problem was, how to use LessCSS in Java, and more specifically Wicket?
The author of LessCSS, cloudhead, wrote the initial version in Ruby, however the new and improved version of LessCSS is written in Javascript.
This makes integration quite easy, using Mozilla Rhino, a Java environment for running Javascript.
As part of the 0.3.2 release of visural-common I included an integration which Java-enabled less.js by using Mozilla Rhino. Asual also did this, however I had some problems with the way his version was initialised and shutdown when doing redeploys of a web app, so I wrote my own integration using the latest trunk version of less.js.
With the 0.6 release of visural-wicket, I created a Wicket Resource Provider which will do auto-compilation of “.less” files inside of Wicket web applications. This makes working with LessCSS as natural as working with CSS itself.
My only gripe with LessCSS at the moment is that it doesn’t support the filter:IE…. garbage that you can use to do certain effects in IE browsers (e.g. gradients, shadows, etc.) which would be nice, however I know these are on the roadmap, and might be best separated out anyhow.
Related posts:
I’m interested in your LessCSS integration with Wicket. It sounds great, but before I start digging into it, could you answer some basic questions?
1. I assume generated *.css files are cached so the application doesn’t have to repeatedly build them for different requests. Is this correct?
2. How are they cached, and how long does the cache live?
3. If I am in development mode, will changes to my *.less files automatically be recompiled? I need to make sure that I don’t have to add another compile step or server stop/start to my development process.
4. If I have a few IE filter commands, such as filter: alpha(opacity=50), isn’t an easy workaround to just add a regular CSS file for IE specific filters? Or is there something else that complicates this further?
5. Have you found it to make sites perform better by doing this server-side instead of client-side with less.js? My app requires javascript anyway, so I could use either option.
6. Are your projects available via a Maven repository?
7. Can you elaborate more on the issues with Asual’s Less for Java? I was looking into it as well.
8. How much overhead does this add to an application? Are load times increased substantially? Is memory use much larger?
Thanks. Your project looks promising and I’m excited to try it out!
Tauren
Hi Tauren,
1 – Yes correct
2 – They are cached indefinitely
3 – Not at this stage, it is noted for a future release
4 – Correct, that’s how I’ve implemented it in my projects, but it would just be nice if you could have a single .less file
5 – No noticeable performance difference, I’d just rather do it server side, so the client’s don’t have to bring down less.js and parse it themselves. It’s then transparent to the client.
6 – Yes there is rudimentary Maven support, see http://code.google.com/p/visural-wicket/wiki/MavenSupport and http://code.google.com/p/visural-common/wiki/MavenSupport
7 – I had problems with hot-redeploys with Asual’s Less for Java, I think the way he builds the Javascript engine w/ Rhino is the source of the issues, but I didn’t look into it further
8 – No noticeable overhead. Most apps only have one or two stylesheets so unless you had 100′s there would not be a noticeable overhead
Also, I have more recently created ResourceTransformFilter, which is a framework-agnostic way of supporting less.js in your Java web apps. I actually think it is a better solution for Wicket apps than my native Wicket solution and I’ve converted most of my projects over to it. Take a look here -
http://www.richardnichols.net/2010/07/java-web-datauris-lesscss-javascript-css-compression/
If you have any issues with either one, please let me know
Hi,
Is there performance issues using Scripting language (aka the JavaScript file) instead of pure Java ?
I think it is also much more work to provide a pure Java version
The performance characteristics of the browser version will be different than the pre-computed version, sometimes worse sometimes better. However users with Javascript disabled will not be able to see the site as intended.
Also, the “pure Java” version is very little work to maintain as it uses Mozilla Rhino to simply run the browser-based Javascript version.
You will have to assess based on your own requirements whether pre-computing the CSS is sensible or whether less.js in the browser will do.
Personally I prefer to precompute, although now I use ResourceTransformFilter to perform less.js compilation, compression and DataURI inlining based on the user-agent that’s connecting – read more here – http://www.richardnichols.net/2010/07/java-web-datauris-lesscss-javascript-css-compression/
Hi Richard,
Thanks for open sourcing this, much appreciated. I’ve been working on my own integration and wondered if you have been able to get the ‘@import “filename.less”‘ command in LessCSS to work with Rhino and less.js? I’ve been having issues and wondering if you’ve got any tips or it just worked for you?
@Eliot
I’m not sure that my implementation includes the @import functionality (did this get added in a more recent version of less.js?), but in any case, no it wouldn’t work anyhow. I think that it only makes sense in the context of using less.js in the client, rather than on the server.
Hi Richard,
Great job so far! Im also curious about the @import functionality. I’m planning on building the style of my site based on the JQuery css files. It would be nice if it was possible to just import the JQuery css in the beginning of my less file and then build my own less classes based on the css classes defined in the imported JQuery css. Then when I would like to change the style of the page, I would just have to switch out the JQuery css.
I could of course put everything in the JQuery css into my less file, but I think it would be a nicer solution to keep the files apart.
Anyway, thanks for the great job!
Very nice. Thanks for posting this. I have a minor variation on your LessCSS.java code that uses only Rhino and JKD6 bits. When I try to run a simple style.less through the .less() method, I get
Exception in thread “main” org.mozilla.javascript.EcmaError: ReferenceError: “less” is not defined. (run.js#1)
where the code goes to execute the final call to “lessIt()”.
I’ve stared at this for a couple hours and still can’t see how my code differs from yours. Probably time for a walk. Ugh.
Any ideas?
Thanks much.