带有 LESS css 的双 url

Question

我有一个用于视网膜背景图像的简单 LESS 样式表，但最终发生的事情是它会将我的域名添加到 url 并且无法显示图像。

例如：它将 url 更改为http://mydomain.com/'_img/background@2x.jpg'，然后它不会显示，因为它有 ' 在那里。我怎样才能防止它这样做？

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

Answer 1

我相信您发布的代码中有错字...我相信在第二个背景图像行中，" 应该是 @。

无论如何，他可以解决问题的方法是这样做（在 javascript 部分中没有 @{path} 周围的引号），然后使用字符串插值 '@{at2x_path}' 来获取输出 url 周围的引号。

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

我在 1.3.3 和 1.4 测试版中对此进行了测试，两次都给出了以下结果

CSS 输出：

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

---

编辑： 由于这使用了 javascript Andre 在下面的评论中注意到，它在lessphp 中引发了解析错误。因此，这是一种仅使用 LESS 而不使用 javascript 的方法，方法是将文件作为单独的参数结尾的 mixin：

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

此解决方案应该给出相同的结果，并且不需要 javascript。但是，现在您需要确保将文件名拆分为两个参数。