1. 程式人生 > >less 循環模擬sass的for循環效果

less 循環模擬sass的for循環效果

ESS generate gen span 寬度 h110 for循環 效果 clas

// 輸入框部分寬度 從10px到600px 相隔10像素
.generate-widths(600);
.generate-widths(@n, @i: 10) when (@i =< @n) {
  .width@{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; }

less 循環模擬sass的for循環效果