SyntaxError: функция вычисления ошибки `unit`: первый аргумент для единицы должен быть числом

Question

Я использую меньше 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:

.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.

Начиная с версии 1.5 вы не можете передавать нечисловые значения (не передавая isnumber()) таким функциям, как unit(), которые принимают только числа в качестве аргументов, даже если они работали в более ранних версиях.

И - числовые значения в интерполяции javascript не были распознаны как числовые с помощью LESS < = 1.6.0 и isnumber(`2`); вернули false.

Итак, эти две составляющие - причина, по которой номера, возвращаемые javascript, не работали в версии 1.5, но работали до версии v1.5 и снова работали в LESS v1.6.

---

Но если вам нужно использовать его в версии 1.5 вы можете «бросить тип», используя функцию, которая делает принимает строку или «нечисловых номера» возвращаемый яваскрипт интерполяция:

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

это добавляет знак процента % в конце ... но на самом деле не имеет значения, хотите ли вы просто использовать его для числа ... так как теперь вы можете передать его любой функции, которая принимает только числа ... в вашем случае с помощью unit() вы можете сменить устройство так, как вам нравится.

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

Однако еще более простое решение в вашем случае было бы просто пропустить функцию unit() и сцепить устройство для @getNum:

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

Выходной CSS будет в обоих случаях выглядит следующим образом:

margin-left: 230px;