Less的循环写法与sass循环写法

sass循环

@for $var from 1 to 10 {
  .mtp#{$var} { margin-top:px2rem($var * 10)}  
  .mbt#{$var} { margin-bottom:px2rem($var * 10)}
  .mlt#{$var} { margin-left:px2rem($var * 10)}
  .mrt#{$var} { margin-right:px2rem($var * 10)}
}
@for $var from 0 to 12 {
  .font#{10 + $var}{font-size: px2rem(2 * (10 + $var))}
}

 

less循环

@i:10;
.loop(@i)when(@i>0)
{
    .loop((@i - 1));
    .mrt@{i}{margin-right:(10px * @i);}
    .mlt@{i}{margin-left:(10px * @i);}
    .mtp@{i}{margin-top:(10px * @i);}
    .mbt@{i}{margin-bottom:(10px * @i);}
    @a: (@i + 11) * 2;
    .font@{a}{font-size: (22px + 2 * @i);}
}
.loop(@i);

less输出（项目自动转了rem）

.mrt1 {
  margin-right: 0.13333rem;
}
.mlt1 {
  margin-left: 0.13333rem;
}
.mtp1 {
  margin-top: 0.13333rem;
}
.mbt1 {
  margin-bottom: 0.13333rem;
}
.font24 {
  font-size: 0.32rem;
}
.mrt2 {
  margin-right: 0.26667rem;
}
.mlt2 {
  margin-left: 0.26667rem;
}
.mtp2 {
  margin-top: 0.26667rem;
}
.mbt2 {
  margin-bottom: 0.26667rem;
}
.font26 {
  font-size: 0.34667rem;
}
.mrt3 {
  margin-right: 0.4rem;
}
.mlt3 {
  margin-left: 0.4rem;
}
.mtp3 {
  margin-top: 0.4rem;
}
.mbt3 {
  margin-bottom: 0.4rem;
}
.font28 {
  font-size: 0.37333rem;
}
.mrt4 {
  margin-right: 0.53333rem;
}
.mlt4 {
  margin-left: 0.53333rem;
}
.mtp4 {
  margin-top: 0.53333rem;
}
.mbt4 {
  margin-bottom: 0.53333rem;
}
.font30 {
  font-size: 0.4rem;
}
.mrt5 {
  margin-right: 0.66667rem;
}
.mlt5 {
  margin-left: 0.66667rem;
}
.mtp5 {
  margin-top: 0.66667rem;
}
.mbt5 {
  margin-bottom: 0.66667rem;
}
.font32 {
  font-size: 0.42667rem;
}
.mrt6 {
  margin-right: 0.8rem;
}
.mlt6 {
  margin-left: 0.8rem;
}
.mtp6 {
  margin-top: 0.8rem;
}
.mbt6 {
  margin-bottom: 0.8rem;
}
.font34 {
  font-size: 0.45333rem;
}
.mrt7 {
  margin-right: 0.93333rem;
}
.mlt7 {
  margin-left: 0.93333rem;
}
.mtp7 {
  margin-top: 0.93333rem;
}
.mbt7 {
  margin-bottom: 0.93333rem;
}
.font36 {
  font-size: 0.48rem;
}
.mrt8 {
  margin-right: 1.06667rem;
}
.mlt8 {
  margin-left: 1.06667rem;
}
.mtp8 {
  margin-top: 1.06667rem;
}
.mbt8 {
  margin-bottom: 1.06667rem;
}
.font38 {
  font-size: 0.50667rem;
}
.mrt9 {
  margin-right: 1.2rem;
}
.mlt9 {
  margin-left: 1.2rem;
}
.mtp9 {
  margin-top: 1.2rem;
}
.mbt9 {
  margin-bottom: 1.2rem;
}
.font40 {
  font-size: 0.53333rem;
}
.mrt10 {
  margin-right: 1.33333rem;
}
.mlt10 {
  margin-left: 1.33333rem;
}
.mtp10 {
  margin-top: 1.33333rem;
}
.mbt10 {
  margin-bottom: 1.33333rem;
}
.font42 {
  font-size: 0.56rem;
}