字符串拼接
出现空格
.size(@val){
font-size: @val + 'px';
}
按照scss写法，此处可拼接成功，编译正确，但是在less中，会多出来一个空格font-size: 20 'px';
解决：
使用unit单位
font-size: unit(@i,px)
使用*或者+
font-size: @i * 1px;
或者
font-size: @i + 0px;
向 less 拼接单位之类的可以直接是下面这些方式：width: @{变量名}+50px;,并不需要这样：width：(@{变量名} + 50) + px;这样就会多出空格
使用字符串转义函数e()
.font-size-@{i} {
font-size: e('@{i}px');
}
each的用法
@selectors: 12, 16, 18, 20, 22, 24, 26, 28, 30, 32, 30, 40, 64;
.icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
each(@selectors, {
&.size-@{value} {
font-size:unit(@value, px);
line-height:unit(@value, px);
}
})
}
编译结果：
.icon-button.size-12 {
font-size: 12px;
line-height: 12px;
}
.icon-button.size-16 {
font-size: 16px;
line-height: 16px;
}
...
写死的@selectors，此处可继续优化
可以写一个方法function
.icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
/**
* function
* @n，最大值
* @i: index
*/
.generate-font-size(@n, @i: 1) when (@i =< @n) {
&.size-@{i} {
font-size: unit(@i, px);
line-height: unit(@i, px);
}
.generate-font-size(@n, (@i + 2));
}
/**调用方法*/
.generate-font-size(64, 12);
}
编译结果：
icon-button.size-12 {
font-size: 12px;
line-height: 12px;
}
icon-button.size-14 {
font-size: 12px;
line-height: 12px;
}
...
.icon-button.size-62 {
font-size: 62px;
line-height: 62px;
}
.icon-button.size-64 {
font-size: 64px;
line-height: 64px;
}
参考链接：
