在LESS CSS中生成随机数？

Question

尝试搜索此内容，但给定的语法很难。在LESS中有没有生成随机数的方法？我查看了文档并没有找到任何东西，但想知道是否有人知道一些技巧或未记录的解决方案。

- user736893

Answer 1

通过 LESS Mixin 进行变化

通过创建一个 LESS Mixin 来生成随机数，您可以在需要的每个地方调用它，并更轻松地控制输出。该代码部分基于 this SO answer 的帮助构建，它允许您控制随机数的输出范围以及它是否输出小数或整数。

LESS 定义 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;
}

上述代码将在每次调用 mixin 时输出一个标记为 @randNum 的变量。因此可以这样做：

LESS 使用 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;
}

当然，我意识到在大多数情况下，您可能不会直接输出这些随机数，而是将它们用于某些其他计算。但这说明了 mixin 的使用方式。

我也意识到这并不能解决与相同类使用相关的任何随机性。换句话说，上面任何一个带有 `.rand3` 类的元素都将具有 `15` 作为其数字。我相信这是您基于评论遇到的问题：

不幸的是，我没有考虑到这会使所有匹配的元素具有相同的随机数，而它确实会这样做。所以我最终使用了 JQuery each() 和标准 JavaScript 来完成我想要的内容。

这就是 LESS 作为 CSS 预处理器的事实。如果要通过 LESS 在类似元素之间实现随机性，您需要通过一种循环结构生成此 mixin 的随机数，并将系列中的每个类应用于各种元素以获得随机性。

- ScottS

Answer 2

根据文档：

JavaScript求值 JavaScript表达式可以在.less文件中作为值来评估。我们建议小心使用此功能，因为使用此功能后，LESS无法被端口编译，使得LESS更难以维护。如果可能，请尝试考虑添加一个函数来实现相同的目的，并在Github上寻求帮助。我们计划允许扩展默认可用的函数。但是，如果您仍然想在.less中使用JavaScript，则需要使用反引号将表达式包装起来：

所以这应该会起作用：

@var: `Math.random()`;

- Jason Sperske

---

没有"!"部分 :) - Zoltan Toth

杰出！不幸的是，我没有考虑到这会使所有匹配元素变成相同的随机数，而这当然是这样的。所以最终我使用了JQuery each（）和标准javascript来实现我想要的东西。但这确实起作用了，而且很酷 :) - user736893

能否在随机数后连接字符串“px”？ “Math.random（）+ 'px'”会在字符串之间创建一个空格。 - another