CSS LESS输出问题

Question

CSS/Less Input:

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

Output:

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

The function works perfect, but I can't figure out why it's creating a space between the # and px as seen here:

(495 px, 0px, 0px);

Answer 1

If you calculate the value in a variable and then insert the variable in an escaped string, it outputs without the space:

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