在LESS CSS中生成随机数？

Question

尝试搜索这个,但鉴于语法很难.有没有办法在LESS中生成一个随机数？我检查了文档并没有看到任何内容,但想知道是否有人知道一个技巧或无证的解决方案.

Answer 1

通过LESS Mixin for Variation

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

较少定义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其编号.我相信这是您根据自己的评论遇到的问题:

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

这就是LESS作为CSS预处理器的生活现实.要通过LESS得到过类似的元素随机性则需要由产生此混入的随机数编班通过某种形式的循环 结构和每一类系列适用于各种要素来获得随机性.

Answer 2

根据文件:

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

所以这应该工作:

@var: `Math.random()`;