Question

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

例如：它会将网址更改为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}'获取输出网址周围的引号。

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中抛出一个解析错误。所以这里有一种方法，你可以通过没有javascript的LESS来做到这一点，方法是将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。但是，现在您需要确保将文件名拆分为两个参数。

双网址与LESS css

1 个答案: