less 循环模拟sass的for循环效果

Posted 2021-01-30 tobebest

// 输入框部分宽度 从10px到600px 相隔10像素
.generate-widths(600);
.generate-widths(@n, @i: 10) when (@i =< @n) {
  [email protected]{i} {
    width: 0px + @i;
  }
  .generate-widths(@n, (@i+10));
}

.width10 {
  width: 10px;
}
.width20 {
  width: 20px;
}
.width30 {
  width: 30px;
}
.width40 {
  width: 40px;
}
.width50 {
  width: 50px;
}
.width60 {
  width: 60px;
}
.width70 {
  width: 70px;
}
.width80 {
  width: 80px;
}
.width90 {
  width: 90px;
}
.width100 {
  width: 100px;
}
.width110 {
  width: 110px;
}
.width120 {
  width: 120px;
}
.width130 {
  width: 130px;
}
.width140 {
  width: 140px;
}
.width150 {
  width: 150px;
}
.width160 {
  width: 160px;
}
.width170 {
  width: 170px;
}
.width180 {
  width: 180px;
}
.width190 {
  width: 190px;
}
.width200 {
  width: 200px;
}
.width210 {
  width: 210px;
}
.width220 {
  width: 220px;
}
.width230 {
  width: 230px;
}
.width240 {
  width: 240px;
}
.width250 {
  width: 250px;
}
.width260 {
  width: 260px;
}
.width270 {
  width: 270px;
}
.width280 {
  width: 280px;
}
.width290 {
  width: 290px;
}
.width300 {
  width: 300px;
}
.width310 {
  width: 310px;
}
.width320 {
  width: 320px;
}
.width330 {
  width: 330px;
}
.width340 {
  width: 340px;
}
.width350 {
  width: 350px;
}
.width360 {
  width: 360px;
}
.width370 {
  width: 370px;
}
.width380 {
  width: 380px;
}
.width390 {
  width: 390px;
}
.width400 {
  width: 400px;
}
.width410 {
  width: 410px;
}
.width420 {
  width: 420px;
}
.width430 {
  width: 430px;
}
.width440 {
  width: 440px;
}
.width450 {
  width: 450px;
}
.width460 {
  width: 460px;
}
.width470 {
  width: 470px;
}
.width480 {
  width: 480px;
}
.width490 {
  width: 490px;
}
.width500 {
  width: 500px;
}
.width510 {
  width: 510px;
}
.width520 {
  width: 520px;
}
.width530 {
  width: 530px;
}
.width540 {
  width: 540px;
}
.width550 {
  width: 550px;
}
.width560 {
  width: 560px;
}
.width570 {
  width: 570px;
}
.width580 {
  width: 580px;
}
.width590 {
  width: 590px;
}
.width600 {
  width: 600px;
}