Question

I am trying to make a background image into a retina image using LESS CSS and RetinaJs:

As suggested in RetinaJS user guide, I included a retina.less file with the following contents:

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


.topMenu {
    .at2x("../../resources/img/topMenuTitle.png");
}

When I test it on Firefox i get the error :

b.value in undefined
in retina.less
@xxxxxxxxxx/resources/js/less-1.3.min.js:8
t@xxxxxxxxxx/resources/js/less-1.3.min.js:8
[...etc...]

In Safari (iPhone 4) I have:

'undefined' is not an object
in retina.less on line null, column 0:
NaN    background-image: url(@path);

I have both topMenuTitle.png (320px x 40px) and [e-mail] (640px x 80px) in the same folder.

Any idea what could be the problem ?

Answer 1

I found the solution

background-image: url(@path);  --->  background-image: url("@{path}");

background-image: url(@at2x_path); --->  background-image: url("@{at2x_path}");

.at2x("../../resources/img/topMenuTitle.png"); ---> .at2x('../../resources/img/topMenuTitle.png');

I hope this helps somebody