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

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 cha开发者_JAVA技巧nged. I am just starting to learn LESS and was wondering if something like this is possible.

---

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");

---

The solution:

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

---

I was searching for the same question and found this page. Thought I would post my solution as someone else might find it useful...

@iconpath: '/myicons/';

.icon (@icon) {
    background: no-repeat url('@{iconpath}@{icon}');
}

.icon-foo { .icon('foo.png'); }
.icon-bar { .icon('bar.png'); }
.icon-spuds { .icon('spuds.png'); }

which compiles to (used http://winless.org/online-less-compiler)

.icon-foo {
  background: no-repeat url('/myicons/foo.png');
}
.icon-bar {
  background: no-repeat url('/myicons/bar.png');
}
.icon-spuds {
  background: no-repeat url('/myicons/spuds.png');
}

---

Here is an updated and clean way to handle image paths with LESS:

Start with your variable:

@imagePath: ~"../images/bg/";

Then use it like this:

.main-bg { 
   background: url('@{imagePath}my-background-image.png') repeat scroll left top; 
}

Make sure the @imagePath variable points to the images folder from wherever you have your compiled CSS, NOT from where you have your LESS files. Also, you have to escape the address in the variable as in the example above to ensure that it does not get rewritten by less.js.

---

Anton Strogonoff's answer is good but be aware of the Issue @294:

Using the above which comes straight from the docs, I get url://pathtolessfile/variable I set. Even though I'm trying to set an absolute URL instead of a relative one. For example this works

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

But this does not work

$base-url: "http://localhost/ns/assets/images/";
@background-image : url ("@{base-url}/bg.png";

In the latter example, my final source path becomes

http://localhost/ns/assets/css/libs/http://localhost/ns/assets/images/bg.png

---

Relative urls can be handled by the command line compiler, supposedly. There's probably some similar option you can set in the file watcher.

https://github.com/cloudhead/less.js/wiki/Command-Line-Usage

EDIT: There totally is. Just look: http://lesscss.org/usage/#command-line-usage-options

relativeUrls: true