a mac and glasses

A Less Mixin for JSF 2 Resource Handling

JSF 2.0 introduced it’s own resource handling. One of the disadvantages of this solution is, that referring to an images inside your CSS doesn’t work the common way:

.foo {
    background-image: url('images/logo.gif'); // doesn't work with JSF 2.x
}

You need to use expression language like:

.foo {
    background-image: url("#{resource['images/logo.gif']}");
}

Now if you are using LESS and don’t want to write this expression over and over again—you need a mixin:

.background-image(@filename) {
    background-image: e(%("url(#{resource['images:%s']})", @filename));
}