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:
less allows you to define variables. You can do something like:
and you will be able to try some other colors changing just one line of code.
you don't need to repeat definitions all over the place. Mixins allow you to reuse your code:
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:
you can later check out my project and see how these examples are translated to css.
Integration in your maven web application project
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:
That's it. If you prefer the newest version of less.js, you can set that option:
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.
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.