Question

我正在尝试在循环中生成一个变量：

box-shadow: 835px 1456px #FFF, 1272px 796px #FFF, 574px 1357px #FFF等...

这是基本的：

box-shadow: x1 y1 #fff, x2 y2 #fff, x3 y3 #fff, x4 y4 #fff ... xn yn #fff.

我试图这样做：

@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

我知道为什么它不能在循环中工作，为什么它不能在循环中工作（作用域和较少的延迟加载； /）如何以不同的方式完成它？

我是否考虑过要在每个步骤中都添加一个变量？这是可能的还是疯狂的主意？

Answer 1

您可以使用较少的lang merge function来将多个属性的阴影值聚合到逗号分隔的列表中。无需将所有阴影存储到一个变量中。

少：

@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输出：

a {
  box-shadow: 79px 81px #fff, 76px 98px #fff, 67px 97px #fff, 44px 25px #fff, 54px 11px #fff;
}

更少-如何在循环中生成变量

1 个答案: