css - 在 LESS CSS 中生成随机数？

Question

尝试搜索此内容，但鉴于语法，这很困难。有什么办法可以在 LESS 中生成随机数吗？我检查了文档但没有看到任何内容，但想知道是否有人知道一个技巧或未记录的解决方案。

Answer 1

通过 LESS Mixin 实现变化

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

LESS 定义混合

/* 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 作为其编号。根据您的评论，我相信这是您遇到的问题:

Unfortunately, I didn't think about this making all matching elements the SAME random number, which of course it does. So I ended up using JQuery each() with standard javascript to accomplish what I wanted.

这就是 LESS 作为 CSS 预处理器的事实。要通过 LESS 获得相似元素的随机性，您需要通过 一系列类 通过 some sort 从该混合中生成随机数的 a loop structure并将该系列的每一类应用于各种元素以获得随机性。