LESS is more!

The dynamic stylesheet language less has been around for about 4 years now. It is not just a pre-processor anymore. With all initiatives to make native support for less in browsers possible, you must agree with me that it has earned a place in modern websites. I will try to make it appealing to you, so you can see, why you should be using less.  I will show you then an easy way to integrate less into your web application using maven. So if you still have some doubts about the power of less, here are some quick reasons why you will be wanting to use it:

Variables

less allows you to define variables. You can do something like:

@myShadeOfGrey: #999999;

# header {
    color: @myShadeOfGrey;
}
h2 {
    color: @myShadeOfGrey;
}

and you will be able to try some other colors changing just one line of code.

Mixins

you don't need to repeat definitions all over the place. Mixins allow you to reuse your code:

.myFontStyle (@size: 5px) {
  font-size:@size;
  font-family:"Times New Roman";
}

#header {
  .myFontSize;
}
#footer {
  .myFontSize(2px);
}

as you can see, you can even use parameters in your definitions.

Functions, Operations and Guards

if the reasons above didn't make it for you, this should do. With less, you are able to manipulate definitions depending on any values you want. It has also some very useful built in functions:

@green: #4D926F;
@the-border: 1px;
@base-color: #842210;
@red:        #842210;

div.class1 {
  background: @green;
  color: @base-color * 3;
  border-left: @the-border;  
  padding: @the-border * 5;
}

div.class2 { 
  color: desaturate(@green, 10%);
  border-color: desaturate(@red, 10%);
}

.background-guard (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.background-guard (@a) when (lightness(@a) < 50%) {
  background-color: @green;
}
.background-guard (@a) {
  color: @a;
}

div.class3 { .background-guard(#ddd) }
div.class4 { .background-guard(#555) }

you can later check out my project and see how these examples are translated to css.

Integration in your maven web application project

If you are like me a web application developer using java, you are using maven. (If not, you are probably doing something very wrong.) So you are delivering a war/ear to be deployed. Your project has some web pages that are included into the package. You could still use less and let the browsers do the processing online with JavaScript. That is the way less.js is built to work. But if you find it kind of shady making the browsers do so much work and depending on some library on load-time, or even are afraid of performance, you could deal with this on compile time. This way you deliver plain css (if you want to) and nobody has to know you even used less.

Go to the site of these guys: https://github.com/marceloverdijk/lesscss-maven-plugin and read the examples. Yes that's it! 

You can find a demo project I made here (made for netbeans, but should work with others IDEs).

Here is a small walktrough:

I created the web application with the following directory structure:

So you can put your less code in a directory, that you can later on exclude in your assembly. The important files after a maven built are here (notice i did not exclude the less directory):

 

All the magic happens in the pom:

<plugin>
    <groupId>org.lesscss</groupId>
    <artifactId>lesscss-maven-plugin</artifactId>
    <version>1.3.3</version>
    <configuration>
        <sourceDirectory>${project.basedir}/src/main/webapp/less</sourceDirectory>
        <outputDirectory>${project.build.directory}/${project.build.finalName}/css</outputDirectory>
        <compress>true</compress>                    
    </configuration>
    <executions>
        <execution>
            <goals>
                <goal>compile</goal>
            </goals>
        </execution>
    </executions>
</plugin>                 

That's it. If you prefer the newest version of less.js, you can set that option:

<plugin>
    <groupId>org.lesscss</groupId>
    <artifactId>lesscss-maven-plugin</artifactId>
    <version>1.3.3</version>
    <configuration>
        <lessJs>${project.basedir}/src/main/webapp/js/less-1.4.1.min.js</lessJs>
        <sourceDirectory>${project.basedir}/src/main/webapp/less</sourceDirectory>
        <outputDirectory>${project.build.directory}/${project.build.finalName}/css</outputDirectory>
        <compress>true</compress>                    
    </configuration>
    <executions>
        <execution>
            <goals>
                <goal>compile</goal>
            </goals>
        </execution>
    </executions>
</plugin>                 

less gives you the programmers view over your css. It allows you to try some stuff the easy way and encourages the user to be clean and structured when using css.

Note:

You will need to run the project on a webserver to try it out. But if you just want to play around with less you can create a simple server to deliver the content using python. Check out my blog on that.