CSS LESS輸出問題

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