less中循环变量怎么写

2023-02-04  本文已影响0人  Simple_Learn
  1. less实现循环,
    代码如下:【循环生成200个点】
.star{
      .loop(@n,@i:1) when(@n > 0 ){
        .loop(@n - 1);
          &:nth-of-type(@{n}){
            @s:~`Math.random()`;
            @random255:~`Math.ceil(Math.random()*255)`;
            @bg:rgb(@random255,@random255,@random255);
            --background: @bg;
            --shadow: 0 0 ~`Math.random()+'vmin'` ~`Math.random()+'vmin'` @bg;
            --size: ~`Math.random()+'vmin'`;
            --back: @n;
            --transform: rotate3d(1, 0, 0, ~`Math.ceil(Math.random()*360)+'deg'`) rotate3d(0, 1, 0, ~`Math.ceil(Math.random()*360)+'deg'`) rotate3d(0, 0, 1, ~`Math.ceil(Math.random()*360)+'deg'`) translate3d(0,0, ~`Math.random()*100+'vmin'`);
          }
        }
      .loop(200);
    }

以上代码就会生成如下的格式:

.star:nth-of-type(1) {
      --size: 0.2835921021vmin;
      --background: #642674;
      --shadow: 0 0 0.1750153474vmin 0.0363164749vmin #642674;
      --transform: rotate3d(1, 0, 0, 328deg) rotate3d(0, 1, 0, 135deg) rotate3d(0, 0, 1, 96deg) translate3d(0,0, 82.541015291vmin)
      ;
    }
上一篇 下一篇

猜你喜欢

热点阅读