LESS

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable. Less runs inside Node, in the browser and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes.

As a prerequisite you have to install node.js.

Now you can globally install the less runtime

npm install -g less

Using the command-line you can easily compile less scripts to corresponding css

lessc styles.less

If you are using the eclipse plugin you can compile directly from the context menu (see IDE).

LESS Mixin Libraries

There are some quite useful LESS mixins libraries like LESS Hat, LESS Elements, Clearless or a fresh project called more-or-less.

These libraries are a huge timesaver by embedding cross-browser knowledge into a mixin library. Here is a good comparisation between the major projects.

A good starting point is LESS Elements, but currently i am injecting "Keyframes" into my codding and i think, i will give "more-or-less" a try.

LESS Elements (example)

A small example how LESS Elements can help you to DRY (Don not repat yourself).

Inside your custom less file like style.less you have to import the mixin:

@import "elements.less";

Now you can use all the functions provided by the mixin for example:

#uoOrderList .sapMImg {
  .transition(.5s, ease);
}

This directive will compile to

#uoOrderList .sapMImg {
  -webkit-transition:all .5s ease;
  -moz-transition:all .5s ease;
  -o-transition:all .5s ease;
  transition:all .5s ease
}

The mixing will generate the needed directives for all browser implementations so you do not have to take care of different implementations and simply use the mixin.