我创建了一个基于 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;
}
}
有任何想法吗?