11

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

4

2 回答 2

17

通过 LESS Mixin 进行变化

通过制作 LESS mixin 来生成随机数，您可以根据需要在每个地方调用它，从而更轻松地控制输出。此代码部分是在此 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;
}

@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;
}

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

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

不幸的是，我没有考虑到这会使所有匹配的元素成为相同的随机数，当然它确实如此。所以我最终使用 JQuery each() 和标准 javascript 来完成我想要的。

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

于 2013-11-09T00:14:06.013 回答
12

根据文档：

JavaScript 评估 JavaScript 表达式可以作为 .less 文件中的值进行评估。我们建议谨慎使用此功能，因为 LESS 将无法通过端口编译，这会使 LESS 更难维护。如果可能的话，试着想一个可以添加的功能来达到同样的目的，并在github上请求它。我们计划允许扩展可用的默认功能。但是，如果您仍想在 .less 中使用 JavaScript，可以通过用反引号包装表达式来完成：

所以这应该工作：

@var: `Math.random()`;
于 2013-11-08T21:47:49.633 回答