CSS少输出问题

Question

CSS / Less输入：

.generate-tiles(12);

.generate-tiles(@n, @i: 1) when (@i =< @n) {
  .generate-tiles(@n, (@i + 1));
  .tile-@{i} {
    transform: rotateX(60deg) rotateZ(45deg) translate3d(((@i - 1) * 45)px, 0px, 0px);
  }
}

输出：

.tile-1 {
  transform: rotateX(60deg) rotateZ(45deg) translate3d(0 px, 0px, 0px);
}

这个功能很完美，但我无法弄清楚为什么它会在#和px之间创建一个空格，如下所示：

(495 px, 0px, 0px);

Answer 1

如果计算变量中的值然后将该变量插入到转义字符串中，则输出时不带空格：

@t: (@i - 1) * 45;
transform: rotateX(60deg) rotateZ(45deg) translate3d(~'@{t}px', 0px, 0px);