compiler-errors - 较少，使用CSS网址中的变量编译问题

Question

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

.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]`;