通过LESS Mixin for Variation

通过使用LESS mixin生成随机数，您可以根据需要在每个位置调用它，更容易控制输出。此代码部分是在this SO answer的帮助下构建的，它允许您控制随机数的输出范围，以及是否输出小数或整数。

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

每次调用mixin时，上面都会输出一个标记为@randNum的变量。那么这可以做到：

少用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为数字。我相信这是您根据评论遇到的问题：

不幸的是，我没有想到这会产生所有匹配元素 SAME随机数，当然是这样。所以我最终使用了使用标准javascript jQuery each（）来完成我想要的。

这就是LESS作为CSS预处理器的生活现实。要通过LESS获得相似元素的随机性，您需要通过系列类通过some sort a loop的structure生成此mixin中的随机数并应用每个系列的各个元素都能得到随机性。

Answer 2

根据the documentation：

JavaScript评估 JavaScript表达式可以作为.less文件中的值进行评估。我们建议谨慎使用此功能，因为LESS不能通过端口进行编译，这使得LESS难以维护。如果可能的话，尝试考虑一个可以添加的函数来实现相同的目的并在github上请求它。我们计划允许扩展可用的默认功能。但是，如果您仍然希望在.less中使用JavaScript，则可以通过使用back-ticks包装表达式来完成：

所以这应该有效：

@var: `Math.random()`;

在LESS CSS中生成随机数？

2 个答案:

通过LESS Mixin for Variation