Generate Random Number in Less CSS

Generate random number in LESS CSS?

According to the documentation:

JavaScript evaluation
JavaScript expressions can be evaluated as values inside .less files. We recommend using caution with this feature as the LESS will not be compilable by ports and it makes the LESS harder to maintain. If possible, try to think of a function that can be added to achieve the same purpose and ask for it on github. We have plans to allow expanding the default functions available. However, if you still want to use JavaScript in .less, this is done by wrapping the expression with back-ticks:

So this should work:

@var: `Math.random()`;

How to generate a random number in LESS once and use multiple times

You can wrap the variable declaration into a mixin and it will be evaluated only once, e.g.:

.constRandom() {
    @randomNum: `Math.ceil(Math.random() * 100000)`;
} .constRandom();

div#div1{
    background: url("/assets/img/core/ui/document-flexpaper-sprite.png?lm=@{randomNum}");
}
div#div2{
    background: url("/assets/img/core/ui/document-flexpaper-sprite.png?lm=@{randomNum}");
}

Is there any way to generate a random number within a given range using only CSS?

There is currently no way to do this in pure CSS, however if you're using a CSS pre-processor, such as LESS, then you can do the following:

@randomMargin: `Math.round(Math.random() * 100)`;

div {
  margin-left: ~'@{randomMargin}px';
}

The reason this works is because LESS will evaluate JavaScript expressions.

If you want to break it into a random mixin/function, you could use:

.random(@min, @max) {
  @random: `Math.round(Math.random() * (@{max} - @{min}) + @{min})`;
}

div {
  .random(-100, 100);
  margin-left: ~'@{random}px';
}

Which will compile with a different margin-left value each time:

div {
  margin-left: 18px;
}

---

However, I am not sure how practical this would be in a production environment since your CSS should already be compiled/minified rather than compiled on the fly. Therefore you should just use straight JavaScript in order to achieve this.

Changing attribute value in CSS with a random number generator

your Animation is not working for me but I think this should work

const label = document.querySelector("p");
label.style.animationDuration = Math.random() + "s";

Math.random() will return a number between 0-1.
http://www.w3schools.com/jsref/jsref_random.asp

btw to fix your animation just add border: solid #000; to your p css

How to generate a random number within a min and max parameters in SASS?

There is no minimum value to set in SASS.

But you can tweak it as follows for a random number from 5 to 15.

.foo
  font-size: (random(11) + 4)+px

added 4 to 11, because random() function has minimum value of 1

How to pick random content from an array

An working example of your code can be found below:

@images: 'ancora.svg', 'timone.svg', 'corda.svg', 'bussola.svg';
@length: length(@images);
@random: `Math.ceil(Math.random() * (@{length}))`;
@randomimage: extract(@images,@random);

#footer-widgets .container .row {
    background: url("//website.com/path/@{randomimage}") no-repeat scroll right 60px bottom 40px rgba(0,0,0,0);
}

Notice that "array" in Less can be defined as lists, also see: Loop through array of variable names in Less
The first index of Less list is 1

Unless you compile your Less code client side (recompile the code for every request) you should take the comment of @Random-User into account. Indeed the compiled CSS is static and the randomize do not seems the make sense.

---

Related Topics