Adobe CQ5 / AEM 6 Supports LESS From Adobe CQ 5.5 Onwards

What is it?

If you blinked you might have missed it in the release notes but Adobe CQ 5.5 supports including LESS files along with your CSS in ClientLibs. If you are not familiar with LESS, it basically makes stylesheets more powerful by adding programming language-like features such as variables, functions, mixins, etc. It is very similar to Sassor Stylus if you have ever used those.

?

1 2 3 4 5 6 7 8 9 10 11 12

// mystyle.less @base-color: #f78c0d; @border-color: lighten(@base-color, 20%); .news-box {     color: @base-color;     border-color: @border-color;           img {         float: right;     } }

which will compile to make the following CSS file

?

1 2 3 4 5 6 7 8

// mystyle.css .news-box {     color: #f78c0d;     border-color: #fabb70; } .news-box img {     float: right; }

So the @base-color variable was defined and then the @border-color used the lighten function to determine its value. This comes in very handy when theming a site. If your base-color is green then all other colors can be different shades of green. If you change base-color to red then all other colors follow suit. Also notice the nested img style. Much easier to read than the traditional repetitive CSS.

How do I use it?

Adobe provides no documentation (that I can find) regarding how to use this new capability. Fortunately it turns out to be pretty straight forward.

If you have not used ClientLibs for your CSS before, take a look at this blog post.

To use LESS files, simply include them in your ClientLib folder, or whatever folder you have specified as your base in css.txt. List the LESS files in css.txt so they get included. They can be mixed with CSS files if you like.

That's it. That is all you have to do. CQ 5.5 ClientLibs logic takes care of the rest. When you access a page that includes your clientlib you will see that the LESS logic has been compiled into straight CSS.

How about an example?

The image below shows how you might have your ClientLibs set up under /etc/designs/mysite.

The "base" folder is of primary type "cq:ClientLibraryFolder" and has "categories" set to "etcdesigns.mysite.base". There is both a LESS and CSS file under the "css" folder. Like I said, they can be mixed.

The css.txt would contain the following lines.

?

1 2 3 4

#base=css dynamic.less static.less

To include these stylesheets in your page you would just add the following line.

?

1	<cq:includeClientLIb css="etcdesigns.mysite.base" />

Where is the magic?

The compilation of the LESS logic is done on the server side using Rhino (a Javascript compiler for Java) and LESS version 1.1.6.

If you go to your Felix console and look under Bundles you should find one called "Adobe Granite UI Commons (com.day.cq.cq-widgets)".

To get to the JAR file for this bundle you will need to note the number next to it in the console. As youc can see, in my case it is bundle number 74.

Assuming the bundle number is 74, on your file system go to "/crx/quickstart/launchpad/felix/bundle74/version0.0"

If you open bundle.jar you will find the following files:

File Path	Description
/com/day/cq/widget/impl/HtmlLibraryManagerImpl.class	In charge of building all the client library resources into their final form for reference on the site.
/com/day/cq/widget/impl/LessCssFileBuilder.class	Takes care of adding the LESS files to the final CSS file for the clientlib.
/com/day/cq/widget/impl/LessCompiler.class	Used by LessCssFileBuilder above to compile the LESS into CSS.
/com/day/cq/widget/less/env.rhino.js	A simulated browser environment written in javascript used by Rhino
/com/day/cq/widget/less/less-1.1.6.js	The LESS javascript library used by CQ 5.5.

What are some other things to note?

Avoid using @import : Using @import statements in your LESS script referencing another LESS script in the same clientlib will cause an exception to be thrown. If your LESS dependency is in the same clientlib, just make sure it is listed before the script that uses it in your css.txt file.

LESS LIbrary Version : Since the path to the LESS library is hard-coded in the LessCompiler class (as "/com/day/cq/widget/less/less-1.1.6.js"), it is not possible to upgrade the version used for ClientLibs. Adobe has informed me that the next release of CQ will be upgraded to LESS 1.3.0.