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
Webpack "Ots Parsing Error" Loading Fonts
Css3 Flexbox: Display: Box VS. Flexbox VS. Flex
CSS Selector (Id Contains Part of Text)
How to Use Relative/Absolute Paths in CSS Urls
How to Make a Circle Around Content Using CSS
Margin-Top Not Working with Clear: Both
CSS Get Height of Screen Resolution
Why Doesn't Inset Box-Shadow Work Over Images
Changing Chunk Background Color in Rmarkdown
What Disadvantages Are There to the <Button> Tag
Flex Auto Margin Not Working in Ie10/11
How Do Browsers Read and Interpret CSS
Making Jagged Triangle Border in CSS