Compiler errors 更少,编译CSS URL中的变量问题

Compiler errors 更少,编译CSS URL中的变量问题,compiler-errors,less,quotes,word-wrap,Compiler Errors,Less,Quotes,Word Wrap,我创建了一个小的基于较少的mixin,用于以标准或视网膜格式输出图像。我无法理解如何将变量包装在一些CSS url中,而这些CSS url是与此相关的-当我编译下面的代码时,我最终得到了url(“”)sprite@2x.png'')。两个后台属性似乎都需要用引号括起来,以便编译器获取变量。虽然这是可行的,但当我尝试为高ppi场景设置background属性时,我在文件名周围加上了这些额外的单引号 .image(@path, @w: auto, @h: auto) { background

我创建了一个小的基于较少的mixin,用于以标准或视网膜格式输出图像。我无法理解如何将变量包装在一些CSS url中,而这些CSS url是与此相关的-当我编译下面的代码时,我最终得到了url(“”)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;
    }
}

有什么想法吗?

我假设您正在将
@路径本身作为字符串传递,类似于:

.image('sprite.png');
您可以执行以下两种操作之一:

1) 呼叫时退出(不太方便用户) 2) 修改javascript以不添加额外的引号(用户友好) 这将保留未scaped调用
.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]`;

非常感谢你!我的头撞在墙上了。第二条路线似乎是更好的选择。
@path_2x: ~`@{path}.split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + @{path}.split('.')[@{path}.split('.').length - 1]`;