60

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.

SimonMayer
  • 4,719
  • 4
  • 33
  • 45
JD Isaacks
  • 56,088
  • 93
  • 276
  • 422

6 Answers6

94

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");
Anton Strogonoff
  • 32,294
  • 8
  • 53
  • 61
  • 7
    do mind that the quotes for 'url()' are important. I've forgot these and it didn't work. Hope this helps someone. – ndequeker Aug 24 '12 at 14:09
13

The solution:

.side-bg
{
    background : ~"url( '@{image-path}/layout/side-bg.jpg' )" top no-repeat;
}
ndequeker
  • 7,932
  • 7
  • 61
  • 93
ANBe
  • 141
  • 1
  • 3
9

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');
}
Sean Connelly
  • 121
  • 1
  • 4
7

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.

jonschlinkert
  • 10,872
  • 4
  • 43
  • 50
7

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
Community
  • 1
  • 1
Shawn C
  • 126
  • 1
  • 3
  • I don't know if it will work but you could try "/ns/assets/images/" as the base url. Also I am using absolute URls without a problem, I am using the lessc compiler though, not the client side JavaScript. – JD Isaacks Oct 27 '11 at 12:36
  • @JohnIsaacks I can get the relative URL's to work, but my main problem with that is that I keep my development less files in assets/css/lib and my productions stylesheets in assets/css/ so if on development I need to go ../../ but when I compile it for production i need to replace that with ../ personally I compile with the LESS.APP for Mac when I'm finished with my site build. But I've noticed there's atleast 3 new compiler's that just came out finally with Multi-Platform Support so if I ever get a chance to install them, I'll probably be using SimpLess for Linux. – Shawn C Oct 27 '11 at 21:13
  • If you do not have a solution for this, it does not seem to belong as an answer. – trysis Mar 17 '15 at 17:17
  • remove ending slash from **@base-url** maybe that will help. Like this: `$base-url: "http://localhost/ns/assets/images";` – CodeGems Oct 09 '15 at 08:03
1

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
Justin Hamade
  • 833
  • 8
  • 15
posit labs
  • 8,951
  • 4
  • 36
  • 66