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;    
}


        

Answer 1

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.

Answer 2

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');
}

Answer 3

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

Answer 4

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

Answer 5

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 6

The solution:

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