0

我正在尝试使用LESS CSS和RetinaJs将背景图像制作成视网膜图像：

正如 RetinaJS 用户指南中所建议的，我包含了一个具有以下内容的 Retina.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;
  }  
}


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

当我在 Firefox 上测试它时，我得到了错误：

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...]

在 Safari（iPhone 4）中，我有：

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

我在同一个文件夹中同时拥有 topMenuTitle.png (320px x 40px) 和 topMenuTitle@2x.png (640px x 80px)。

知道可能是什么问题吗？

4

2 回答 2

0

我找到了解决方案

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

我希望这可以帮助某人

于 2012-09-16T21:32:06.280 回答
0

也许我做错了什么，但上面的说明对我不起作用。我确实发现更新到最新的retina.less 分支确实起到了作用。但不是来自主网站，我是指来自 Github 的版本。 https://github.com/imulus/retinajs/blob/master/src/retina.less

于 2013-08-03T03:15:01.373 回答