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.

Anton Strogonoff · Accepted Answer · 2014-04-07T09:21:07.610

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

edited Apr 07 '14 at 09:21

answered Jun 09 '11 at 17:14

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

score 13 · Answer 2 · edited Aug 24 '12 at 13:57

13

The solution:

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

edited Aug 24 '12 at 13:57

ndequeker

7,932
7
61
93

answered Jun 08 '12 at 14:32

ANBe

141
1
3

score 9 · Answer 3 · answered Jan 05 '13 at 11:23

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

score 7 · Answer 4 · answered Jul 20 '12 at 05:15

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.

score 7 · Answer 5 · edited May 23 '17 at 12:32

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

edited May 23 '17 at 12:32

Community

1
1

answered Oct 27 '11 at 03:50

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

score 1 · Answer 6 · edited Jul 13 '16 at 22:01

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

edited Jul 13 '16 at 22:01

Justin Hamade

833
8
15

answered Apr 05 '13 at 21:11

posit labs

8,951
4
36
66

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

6 Answers6

Linked