Less - how to generate values in a loop - css

Question

I'm trying to generate a variable in the loop:
box-shadow: 835px 1456px #FFF, 1272px 796px #FFF, 574px 1357px #FFFetc ...
It is basic:
box-shadow: x1 y1 #fff, x2 y2 #fff, x3 y3 #fff, x4 y4 #fff ... xn yn #fff.
I tried to do it like this:
#maxPiont: 2000;
#minPoint: 0;
.init() {
.make-point(`Math.random()`, `Math.random()`, ""); // set initial value - ignore for now
}
.init();
.make-point(#newX, #newY, #old) {
.redefine() {
#X: floor(#newX * (#maxPiont - #minPoint + 1));
#Y: floor(#newY * (#maxPiont - #minPoint + 1));
#point: '#{X} #{Y} #fff';
#allPoints: "#{point}, #{old}";
}
}
.make-stars(#i) when (#i >0) { // sadly in loop we are in same scope all the time and trick wont work
.redefine();
.make-point(`Math.random()`, `Math.random()`, #allPoints);
.test
{
box-shadow: #allPoints;
}
.make-stars(#i - 1);
}
.make-stars(1); // <- scope 1
.make-stars(1); // <- scope 2
.make-stars(1); // <- scope 3
.make-stars(100); // <- scope 4
.make-stars(1); // <- scope 5
.make-stars(1); // <- scope 6
.make-stars(1); // <- scope 7
I know why it is not working in the loop and why it is working outside of it (scopes and less lazy loading ;/) How it can be done in a different way?
Did I think about making a variable per every step and add it? Is this possible or crazy idea?

Answer 1

You can use less lang merge function to aggregate shadow values from multiple properties into a comma separated list. No need to store all shadows into one variable.
Less:
#min: 1; // Min random number
#max: 100; // Max
// Generate single shadow with random position
.random-shadow() {
#x: `Math.floor(Math.random() * (#{max} - #{min}))`;
#y: `Math.floor(Math.random() * (#{max} - #{min}))`;
box-shadow+: unit(#x, px) unit(#y, px) #fff;
}
// Loop to set #count shadows to the element
.multiple-shadow(#count) when (#count > 0) {
.random-shadow();
.multiple-shadow(#count - 1);
}
a {
.multiple-shadow(5);
}
Css output:
a {
box-shadow: 79px 81px #fff, 76px 98px #fff, 67px 97px #fff, 44px 25px #fff, 54px 11px #fff;
}