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

通过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中的随机数并应用每个系列的各个元素都能得到随机性。