css - LESS -webkit-image-set 错误

Question

当我尝试编译以下代码时，LESS 自动在 x 之前添加一个空格，但无法找到删除它的方法。非常令人沮丧。

减少:

background-image: -webkit-image-set(url(images/press-coverage-1x.png) 1x, url(images/press-coverage-2x.png) 2x;

CSS:

background-image: -webkit-image-set(url(images/press-coverage-1x.png) 1 x, url(images/press-coverage-2x.png) 2 x;

注意“1”[空格]“x”和“2”[空格]“x”之间的空格

尝试过:

减少:

background-image: -webkit-image-set(url(images/press-coverage-1x.png) ~"1x", url(images/press-coverage-2x.png) ~"2x";

background-image: ~"-webkit-image-set(url(images/press-coverage-1x.png) 1x, url(images/press-coverage-2x.png) 2x";

background-image: e("-webkit-image-set(url(images/press-coverage-1x.png) 1x, url(images/press-coverage-2x.png) 2x");

background-image: %("-webkit-image-set(url(images/press-coverage-1x.png) %s, url(images/press-coverage-2x.png) %s)", "1x", "2x");

以上所有方法都无法使其工作，最接近的是最后一个，但是，它在字符串周围添加了引号，仍然无法工作。

非常感谢您的宝贵时间!!

Answer 1

您的代码可以在 Less 1.7.0 中正常运行。你可以在这里测试http://lesstester.com/ (使用 Less 1.7.0)。粘贴下面的代码。您会看到它没有添加任何空格:

.sec-1 {
  background-image-1: -webkit-image-set(url(images/press-coverage-1x.png) ~"1x", url(images/press-coverage-2x.png) ~"2x");
  background-image-2: ~"-webkit-image-set(url(images/press-coverage-1x.png) 1x, url(images/press-coverage-2x.png) 2x";
  background-image-3: e("-webkit-image-set(url(images/press-coverage-1x.png) 1x, url(images/press-coverage-2x.png) 2x");
  background-image-4: %(~"-webkit-image-set(url(images/press-coverage-1x.png) %s, url(images/press-coverage-2x.png) %s)", "1x", "2x");
}

它产生:

.sec-1 {
  background-image-1: -webkit-image-set(url(images/press-coverage-1x.png) 1x, url(images/press-coverage-2x.png) 2x);
  background-image-2: -webkit-image-set(url(images/press-coverage-1x.png) 1x, url(images/press-coverage-2x.png) 2x;
  background-image-3: -webkit-image-set(url(images/press-coverage-1x.png) 1x, url(images/press-coverage-2x.png) 2x;
  background-image-4: -webkit-image-set(url(images/press-coverage-1x.png) 1x, url(images/press-coverage-2x.png) 2x);
}

至于最后一个，您始终可以在字符串前添加波浪号以从 CSS 中删除引号。

如果由于某种原因你不能升级到更新版本的 Less，你可能会尝试变量，插值与否:

@x1: 1x;
@x2: 2x;

.sec-1 {
  background-image-1: -webkit-image-set(url(images/press-coverage-1x.png) @x1, url(images/press-coverage-2x.png) @x2);
  background-image-2: ~'-webkit-image-set(url(images/press-coverage-1x.png) @{x1}, url(images/press-coverage-2x.png) @{x2})';
  background-image-3: -webkit-image-set(~'url(images/press-coverage-1x.png) @{x1}, url(images/press-coverage-2x.png) @{x2}');
}