Создать случайное число в LESS CSS?

Ответ 1

Согласно документации:

Оценка JavaScript Выражения JavaScript могут быть оценены как значения внутри .less файлов. Мы рекомендуем с осторожностью относиться к этой функции, поскольку LESS не будет скомпилироваться портами, и это облегчит работу LESS. Если возможно, попробуйте подумать о функции, которая может быть добавлена ​​для достижения той же цели и попросить ее о github. У нас есть планы по расширению доступных функций по умолчанию. Однако, если вы все еще хотите использовать JavaScript в .less, это делается путем обертывания выражения с помощью обратных тиков:

Итак, это должно работать:

@var: `Math.random()`;

Ответ 2

Меньшим миксином для вариации

Сделав LESS mixin для генерации случайного числа, вы можете называть его каждым местом по мере необходимости с более легким управлением выходом. Этот код был частично создан с помощью этого SO-ответа, который позволяет вам управлять диапазоном вывода случайного числа и выводить ли он десятичные числа или целые числа.

LESS Define Mixin

/* Mixin to generate random number;
   int should be 0 or 1, 1 being to make it an integer 
*/
.makeRandom(@min: 0, @max: @min+1, @int: 0) { 
  .checkInt() {
    @getNum: `Math.random() * (@{max} - @{min} + @{int})`;
    @base: unit(`@{int} == 1 ? Math.floor(@{getNum}) : @{getNum}`);
  }
  .checkInt();
  @randNum: @base + @min;
}

Вышеуказанная выведет переменную с меткой @randNum для каждого вызова mixin. Итак, это можно сделать:

МЕНЬШЕ Использовать Mixin

.rand1 {
  .makeRandom(); /* straight random decimal between 0 - 1 */
  random-number: @randNum;
}

.rand2 {
  .makeRandom(@max: 2); /* random decimal 0 - 2 */
  random-number: @randNum;
}

.rand3 {
  .makeRandom(10, 20, 1); /* random integer  10 - 20 */
  random-number: @randNum;  
}

Что дает выход что-то вдоль этих строк (конечно, числа будут меняться с каждой компиляцией от LESS):

Выход CSS

.rand1 {
  /* straight random decimal between 0 - 1 */

  random-number: 0.1597523226169918;
}
.rand2 {
  /* random decimal 0 - 2 */

  random-number: 0.08123856632111548;
}
.rand3 {
  /* random intger  10 - 20 */

  random-number: 15;
}

Конечно, я понимаю, что вы, вероятно, в большинстве случаев не будете напрямую выводить эти случайные числа, а скорее используете их в некоторых других вычислениях. Но это иллюстрирует использование смесителя.

Я также понимаю, что это не разрешает случайности в отношении использования одного и того же класса. Другими словами, любой элемент с классом .rand3 выше будет иметь 15 в качестве его номера. Я считаю, что это проблема, с которой вы столкнулись, на основе вашего комментария:

К сожалению, я не думал об этом, делая все соответствующие элементы одно и то же случайное число, которое, конечно же, делает. Поэтому я закончил тем, что использовал JQuery каждый() со стандартным javascript, чтобы выполнить то, что я хотел.

Это как раз тот факт, что LESS является препроцессором CSS. Чтобы получить случайность по схожим элементам через LESS, вам нужно будет генерировать случайные числа из этого mixin серией классов через какой-то вид цикл и применить каждый класс серии к различным элементам, чтобы получить случайность.