LESS字符串拼接,多出一个空格怎么办?

大伯格
  • 371

首先我设置一个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;
}

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

回复
阅读 5.6k
3 个回答
✓ 已被采纳
font-size: unit(@i,px)
clh_Jackson
  • 1
新手上路,请多包涵

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

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

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

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

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

参考less中文网

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏