CODEWITHSUNDEEP
cssless
Kinga
Kinga

Reputation: 386

Less - how to generate values in a loop

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?

Upvotes: 0

Views: 248

Answers (1)

3rdthemagical
3rdthemagical

Reputation: 5350

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;
}

Upvotes: 2

Related Questions