My goal is to create a variable within a loop:
box-shadow: 835px 1456px #FFF, 1272px 796px #FFF, 574px 1357px #FFFThe concept is simple:
box-shadow: x1 y1 #fff, x2 y2 #fff, x3 y3 #fff, x4 y4 #fff ... xn yn #fff.
I attempted to achieve this by doing the following:
@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) { // unfortunately, in a loop we are in the same scope all the time and the trick won't 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 understand why it's not working within the loop and why it works outside of it (due to scopes and less lazy loading). Is there another way to approach this?
I'm considering creating a variable step by step and adding it. Is this feasible or just a crazy idea?