无CSS输出问题

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);
  }
}

该函数工作得非常完美，但我不明白为什么它会在

#

和

px

之间创建一个空格，如下所示：

(495 px, 0px, 0px);

---

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

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

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