Less函数中动画延迟值与单位间空格的原因及解决方法

我之前也踩过这个坑！你写的Less循环函数生成animation-delay时，数值和s之间多出的空格，其实是Less的解析规则导致的——当你把计算表达式(.25*@i)直接跟单位s写在一起时，Less会把计算后的数值和单位当成两个独立的元素处理，自动给它们加上空格分隔，结果就生成了无效的CSS。

先明确你的代码情况：

输入的Less代码 #

.generateDelay(5);
.generateDelay(@n, @i: 1) when (@i <= @n) {
  &:nth-child(@{i}) {
    animation-delay: (.25*@i)s;
  }
  .generateDelay(@n, (@i + 1));
}

输出的CSS代码（带无效空格） #

animation-delay: 0.25 s;
animation-delay: 0.5 s;
/* 以此类推 */

下面给你两种靠谱的解决办法，亲测有效：

方法1：使用Less的unit()函数（推荐）

unit()是Less专门用来给数值添加单位的内置函数，它会直接把数值和单位合并成一个没有空格的字符串，完全符合CSS语法要求。修改后的代码如下：

.generateDelay(5);
.generateDelay(@n, @i: 1) when (@i <= @n) {
  &:nth-child(@{i}) {
    animation-delay: unit(.25*@i, s);
  }
  .generateDelay(@n, (@i + 1));
}

方法2：用字符串转义强制拼接

通过~"..."语法把计算结果和单位强制拼成一个完整的字符串，让Less不会自动添加空格。代码可以这么写：

.generateDelay(5);
.generateDelay(@n, @i: 1) when (@i <= @n) {
  @delayValue: .25*@i;
  &:nth-child(@{i}) {
    animation-delay: ~"@{delayValue}s";
  }
  .generateDelay(@n, (@i + 1));
}

这两种方法生成的CSS都会是正确的格式，比如animation-delay: 0.25s;，不会再有空格导致属性无效的问题了。

内容的提问来源于stack exchange，提问作者Zander