LESS，使用 CSS url 中的变量编译问题

Question

我创建了一个基于 LESS 的小型 mixin，用于以标准或视网膜格式输出图像。我无法理解在与此相关的一些 CSS url 中包装变量 - 当我编译下面的代码时，我最终得到 url('http://sample.com/images/'sprite@2x.png'') 。两个背景属性似乎都需要用引号括起来，以便编译器获取变量。虽然这可行，但当我尝试为高 ppi 场景设置背景属性时，我最终会在文件名周围加上这些额外的单引号。

.image(@path, @w: auto, @h: auto) {
    background-image: url('@{base-url}/images/@{path}');
    @path_2x: ~`"@{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('@{base-url}/images/@{path_2x}');
        background-size: @w @h;
    }
}

有什么想法吗？

Answer 1

我假设您将 @path 作为字符串本身传递，类似于：

.image('sprite.png');

您可以做以下两件事之一：

1) 在通话时转义（不太友好）

.image(~'sprite.png');

2) 修改 javascript 以不添加额外的引号（用户友好）

这会保留未转义的调用.image('sprite.png');，但请注意，我已将您的"@{path}" 更改为仅@{path}，因为路径已经作为字符串传递，所以@{path} 已经解析为字符串并且能够字符串操作。通过添加引号，您实际上是在创建从 'sprite.png' 到 "'sprite.png'" 的路径，然后留下额外的引号。

@path_2x: ~`@{path}.split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + @{path}.split('.')[@{path}.split('.').length - 1]`;