Is there a way to set a common image path for LESS files?

Question

I am using the LESS styling language.

Consider the following CSS:

.side-bg {     background:url(../img/layout/side-bg.jpg) top no-repeat;     } 

Right now all of my images are in the folder ../img/ I wanted to be able to set a variable as the image path and use it like so:

@image-path: ../img;  .side-bg {     background:url(@image-path/layout/side-bg.jpg) top no-repeat;    } 

This does not work however. Its not a huge deal, I could always use find and replace if the image folder ever changed. I am just starting to learn LESS and was wondering if something like this is possible.

Answer 1

Try using string interpolation for things like this. Look for “variable interpolation” in docs.

@base-url: "http://assets.fnord.com"; background-image: url("@{base-url}/images/bg.png"); 

Answer 2

The solution:

.side-bg {     background : ~"url( '@{image-path}/layout/side-bg.jpg' )" top no-repeat; }