css - 带有 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 beta 中对此进行了测试，两次都给出了以下结果

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，安德烈在下面的评论中注意到，它在 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。但是，现在您需要确保将文件名分成两个参数发送。