css - 双 url 和更少的 css

Question

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

例如:它将把 url 更改为 http://mydomain.com/'_img/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9dbd8dad2decbd6ccd7ddf98bc197d3c9de" rel="noreferrer noopener nofollow">[email protected]</a>' ，然后它不会显示，因为其中有 ' 。我怎样才能阻止它这样做？

.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 周围的引号。

在更少中:

.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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8aaa9aba3afbaa7bda6ac88fab0e6a2b8af" rel="noreferrer noopener nofollow">[email protected]</a>');
    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。但是，现在您需要确保将文件名分成两个参数发送。