Double url with LESS css

Question

I have a simple LESS stylesheet for retina background images, but what ends up happening is it prepends my domain name to the url and fails to display the image.

Ex: it will change the url to http://mydomain.com/'_img/background@2x.jpg', and then it doesn't display because it has the ' in there. How can I prevent it from doing such?

.at2x(@path, @w: auto, @h: auto) {
    background-image: url(@path);
    @at2x_path: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") +     "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`;

    @media all and (-webkit-min-device-pixel-ratio : 1.5) {
        background-image: url("at2x_path);
        background-size: @w @h;
    }
}

html {
    .at2x('_img/background.jpg', 1440px, 900px);
}

Martin Turjak · Answer 1 · 2013-04-09T12:40:23.643

I believe there is a typo in the code you posted ... I believe in the second background-image line the " should be an @.

Anyway, he way you could fix your problem is by doing it like this (without the quotes around @{path} in the javascript part) and then using string interpolation '@{at2x_path}' to get quotes around the output url.

in LESS:

.at2x(@path, @w: auto, @h: auto) {
    background-image: url(@path);
    @at2x_path: ~`@{path}.split('.').slice(0, @{path}.split('.').length - 1).join('.') +  '@2x.' + @{path}.split('.')[@{path}.split('.').length - 1]`;

    @media all and (-webkit-min-device-pixel-ratio : 1.5) {
        background-image: url('@{at2x_path}');
        background-size: @w @h;
    }
}

html {
    .at2x('_img/background.jpg', 1440px, 900px);
}

I tested this in 1.3.3 and 1.4 beta, both times it gave the following

CSS output:

html {
  background-image: url('http://mydomain.com/_img/background.jpg');
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  html {
    background-image: url('http://mydomain.com/_img/background@2x.jpg');
    background-size: 1440px 900px;
  }
}

Edit: As this uses javascript Andre noticed in a comment below, that it throws a parsing error in lessphp. So here is a way how you could do this only with LESS with no javascript, by feeding the mixin the file ending as a separate argument:

.at2x(@path, @sfx, @w: auto, @h: auto) {
    background-image: url('@{path}.@{sfx}');
    @media all and (-webkit-min-device-pixel-ratio : 1.5) {
        background-image: url('@{path}@2x.@{sfx}');
        background-size: @w @h;
    }
}

html {
    .at2x('_img/background', 'jpg', 1440px, 900px);
}

This solution should give the same result and does not require javascript. However, now you need to make sure you send the file name split in two arguments.

@AndreZimpel this is cause the code uses javascript interpolation between the ticks ... so it only works right in the javascript implementations of less ... I added an edit to the answer that shows how to do this with an coma separated argument only with LESS no js — Martin Turjak, Apr 09 '13 at 12:30

Double url with LESS css

1 Answers1