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