Created

Oct 21, 2013

The Power of LESS – Part II

Posted by Ugo Cei

In the previous article in this series we introduced the LESS compiler for CSS stylesheets, showed its syntax and demonstrated its benefits in terms of increased readability and maintanability of stylesheets. In this second part, we are going to show how LESS can be used in a CQ project to style components. In order to be able to follow this article, you should be familiar with the creation and usage of Client Libraries in CQ.

In the example that follows, we are going to create a custom Title component that will be styled using LESS.

First, we need to create a component. For simplicity, we will create it in the Geometrixx Outdoors demo application, but it would work the same anywhere. Start by creating a component called less-title under /apps/geometrixx-outdoors/components and set its parent type (sling:resourceSuperType property) to foundation/components/title. Add it to the Geometrixx Outdoors group and set its allowed parent to */parsys so that it can be listed in the Sidekick and added to a page.

Modify the contents of the less-title.jsp file as follows:

<%@page session="false"%><%@ include file="/libs/foundation/global.jsp" %><%
%><%@ page contentType="text/html; charset=utf-8" import="
    info.geometrixx.commons.util.GeoHelper"
%><%

final String title = GeoHelper.getTitle(resource, currentPage);

%>
<cq:includeClientLib categories="cq.demo.title"/>
<h1><cq:text value="<%= title %>" /></h1>

Now create a new node of type cq:ClientLibraryFolder under the component node and call it clientlibs. Add to it a multi-valued String property named categories with a value of cq.demo.title.

Under the clientlibs node, create a file named css.txt with the following content:

#base=.
title.less

At the same level, create a file called title.less with content similar to the following:

div.less-title {
    h1 {
        color: red;
    }
}

file

At the end, the structure of your component should look like the one above. Now you can drop a new instance of the component from the Sidekick into any page (rememeber to enable it in Design mode first) and it should look as follows:

file

Congratulations, you have just created your first component that uses LESS for styling!