LESS字符串拼接，多出一个空格怎么办？

Question

首先我设置一个function

.generate-font-size(@n, @i: 1) when (@i =< @n) {
    .font-size-@{i} {
        font-size: @i+px;
    }
    .generate-font-size(@n, (@i + 2));
}

然后执行

.generate-font-size(24,12);

结果中字符串拼接中间多了个空格

.font-size-12 {
    font-size: 12 px;
}
.font-size-14 {
    font-size: 14 px;
}
.font-size-16 {
    font-size: 16 px;
}
.font-size-18 {
    font-size: 18 px;
}
.font-size-20 {
    font-size: 20 px;
}
.font-size-22 {
    font-size: 22 px;
}
.font-size-24 {
    font-size: 24 px;
}

要怎么才能去掉空格？？？

Answer 1

font-size: unit(@i,px)

Answer 2

可以不需要使用 " + " 进行拼接，
使用
font-size: @i * 1px;
或者
font-size: @i + 0px;
就可以了。
向 less 拼接单位之类的可以直接是下面这些方式：
width: @{变量名}+50px;
并不需要这样：width：(@{变量名} + 50) + px;这样就会多出空格。

Answer 3

解决多个空格的问题可以使用字符串转义函数e()，e()原样返回不带引号的字符串：

.font-size-@{i} {
  font-size: e('@{i}px');
}

或者再更复杂点使用%()格式函数也可以：

.font-size-@{i} {
  font-size: e(%('%dpx',@i));
}

参考less中文网