This is Stuff

In an average case, less expressions are easy to use, very useful and behave the same way as expressions in any other programming language. Unfortunately, their interactions with the rest of css syntax can occasionally cause somewhat quirky behavior. Adding to that, next less language version will change in backward incompatible way and expressions are affected too.

This post shows when and why quirky behavior happens, which problems are going to be solved by planned changes and which traps will still remain there.

Less is declarative language designed to behave and look as closely to css as possible. Less started as an attempt to make css style sheets easier to read and maintain and then added more features and abilities. It evolved so much that it became theoretically possible to do anything with it.

This post shows some less known but very useful less features. It also contains list of potentially useful workarounds and tricks you can use if the default less syntax is not sufficient for what you need. Finally, last chapter shows one practical application of those tricks. We will create mixin to auto generate vendor prefixes for css declarations.

Few months ago I decided to create java port of less.js. Less is an extension of CSS - it adds constants, mixins, ruleset nesting, namespaces and so on. Both reasons why I picked up less and short less introduction are written in introduction into less.

This report starts with current project status and its possible future directions. Second part recaps development and my experiences with used tools. Finally, the last part sums up why did I started with the project in the first place and whether it was worth it.

Wro4j is primary a JavaScript and CSS merge and minimization library. Its original purpose was to speed up the page load. However, its final design made it easy to add integration with LESS, CoffeScript and few other technologies.

Less was introduced in previous article. In short, it is CSS with object oriented inheritance, variables and few other additional features. It is compiled into regular style sheets and served to the browser. Less was written in JavaScript and usually runs in the browser. If you want to run it on the server side, you have to use wro4j or some other integration library.

The post is mostly wro4j tutorial with focus on Less integration. It explains how wro4j works and how to configure it. There is very little about Less and almost everything is about wro4j.

I always missed object oriented inheritance and variables in CSS. Style sheets could be much more readable and maintainable, if they would have ability to say:

• I want this selector color to be just like that one.
• I want this class to be just like that one, with one simple change.

As multiple projects run into CSS explosion and maintenance problems problems, it was only question of time until someone comes with another solution. The original solution came from the Ruby world and is quite simple and elegant:

• extend CSS with needed features,
• compile extended CSS into regular CSS,
• serve the result to the browser.

The browser does not have to deal with a new syntax. It was given standard CSS file and will process it as usually. On the other hand, the programmer had variables, inheritance and few other features available.