css - 语法错误 : error evaluating function `unit` : the first argument to unit must be a number

Question

我使用 less mixin 生成给定范围内的随机数。 这是代码:

.makeRandom(@min: 0, @max: @min+1) {
  // Math.floor(Math.random() * (max - min + 1)) + min
  @getNum: `(Math.floor(Math.random() * (@{max} - @{min} + 1)) + @{min})`;
}

并在调用 div 时调用另一个 mixin 集动画:

.move (@left : 45% , @duration: 5s ,@delay : 2s) {
   animation: moveUp @duration linear @delay infinite;
   /* Safari and Chrome: */
   -webkit-animation: moveUp @duration linear @delay infinite ;
   .makeRandom(100,  400);
   margin-left:  unit(@getNum ,'px');
 }

但是我收到了这个错误

SyntaxError: error evaluating function unit: the first argument to unit must be a number

当我尝试更改单位时。如何更改@getnum 的单位？

Answer 1

我在 v1.5 中注意到了这个问题。

从 v1.5 开始，您不能将非数字值(不传递 isnumber())传递给像 unit() 这样只接受数字作为参数的函数，即使尽管它在早期版本中有效。

并且 - LESS <= 1.6.0 无法将 javascript 插值中的数值识别为数字，isnumber(`2`); 会返回 false。

所以，这两个放在一起就是为什么 javascript 返回的数字在 v1.5 中不起作用，但在 v1.5 之前起作用并在 LESS v1.6 中再次起作用的原因。

---

但如果您需要在 1.5 中使用它，您可以通过使用接受字符串或 javascript 插值返回的“非数字”的函数来“转换类型”:

@str: '230'; //or `230`
@getNum: (percentage(@str)/100);

这会在末尾添加百分号 % ...但是如果您只是想将它用于数字并不重要...因为现在您可以将它传递给任何函数只接受数字......在你的情况下使用 unit() 你可以将单位更改为任何你喜欢的。

margin-left:  unit(@getNum , px);

但是，在您的情况下，一个更简单的解决方案是跳过 unit() 函数并将单元连接到 @getNum:

margin-left:  ~'@{getNum}px';

两种情况下的 CSS 输出都如下所示:

margin-left: 230px;