less创建多个编号型样式类

最近在构建项目框架，在公用样式上突然想到需要定义margin、padding这样的常用样式，若想要1-50的不同编号的样式，单一定义用：margin-top:1px 这样的写法得写50个，就不用说还有button，left…所以去了解了一下函数式的写法，就有了以下：

  /**
  * 递归生成 1-50 像素的内外边距 包括
  * 使用：mrt10  ===  margin-top:10rpx
  * 使用：pdt10  ===  padding-top:10rpx
  */ 
  .creteMP(@i: 1) when (@i =< 50) {
    // =------外
    // 上边距
    .mrt@{i} {
      margin-top: (@i * 1rpx);
    }
    // 下边距
    .mrb@{i} {
      margin-bottom: (@i * 1rpx);
    }
    // 左边距
    .mrl@{i} {
      margin-left: (@i * 1rpx);
    }
    // 右边距
    .mrl@{i} {
      margin-right: (@i * 1rpx);
    }
    // =-------内
    // 上边距
    .pdt@{i} {
      padding-top: (@i * 1rpx);
    }
    .pdr@{i} {
      padding-right: (@i * 1rpx);
    }
    .pdl@{i} {
      padding-left: (@i * 1rpx);
    }
    .pdb@{i} {
      padding-bottom: (@i * 1rpx);
    }
    .creteMP(@i + 1);
  }
  
  .creteMP();

以上代码需要新建为less文件才可执行，输出为：

.mrt1{
	margin-top:1rpx;
}
.mrt2{
	margin-top:2rpx;
}
...
.mrt50{
	margin-top:50rpx;
}
.mrb1{
	margin-bottom:1rpx;
}
.....

.pdb50{
	padding-bottom:50rpx;
}

具体使用：