首先在我们搭建一个项目的时候需要配置一些自定义的class选择器
例如：mr-20等价于margin-right：20px；fs-24等价于font-size：24px；
使用：<div class="mt-20 plr-30 fs-24"></div>
因为mt-20中的20是一个可以变得值，所以我们需要提前自定义好不同数值的class选择器名
此时我们就要用到less中的loop
.loop(@npx) when (@npx <= 200) {
.mr-@{npx} { margin-right: 1px * @npx !important; } //避免我们的class被覆盖，使用!important增加权重
.loop（（@npx+1））
}
.loop（2）
下面附上我在项目中简单配置的一些class
/** margin/padding类生成器； 引用后自动生成相关class类 .mt-2 上边距 .mb-2 下边距 .ml-2 左边距 .mr-2 右边距 .mlr-2 上下为0,设置左右边距 .pt-2 上内边距 .pb-2 下内边距 .pl-2 左内边距 .pr-2 右内边距 .plr-2 上下为0,设置左右内边距 .ptb-2 左右为0,设置上下内边距 .padding-2 上下左右内边距 .height-2 高度2px .H-10 高度10% .weight-2 宽度2px .W-20 宽度20% 用法: <div class="mt-20 plr-30"></div> 解读：div 外边距top为20，内边距left,right均为30**/
@npx: 2;.loop(@npx) when (@npx <= 200) {
.loop((@npx + 1));
.mt-@{npx} { margin-top: 1px * @npx !important; } .ml-@{npx} { margin-left: 1px * @npx !important; } .mr-@{npx} { margin-right: 1px * @npx !important; } .mb-@{npx} { margin-bottom: 1px * @npx !important; } .mlr-@{npx} { margin-left: 1px * @npx !important; margin-right: 1px * @npx !important; } .mtb-@{npx} { margin-top: 1px * @npx !important; margin-bottom: 1px * @npx !important; } .pt-@{npx} { padding-top: 1px * @npx !important; } .pl-@{npx} { padding-left: 1px * @npx !important; } .pr-@{npx} { padding-right: 1px * @npx !important; } .pb-@{npx} { padding-bottom: 1px * @npx !important; } .plr-@{npx} { box-sizing: border-box; padding-left: 1px * @npx !important; padding-right: 1px * @npx !important; } .ptb-@{npx} { box-sizing: border-box; padding-top: 1px * @npx !important; padding-bottom: 1px * @npx !important; } .padding-@{npx} { box-sizing: border-box; padding: 1px * @npx !important; }.width-@{npx} { width: 1px * @npx !important; }.height-@{npx} { height: 1px * @npx !important; }.W-@{npx} { width: 1% * @npx !important; }.H-@{npx} { height: 1% * @npx !important; }.fs-@{npx} { font-size: 1px * @npx !important; }
}
.loopFw(@fw) when (@fw <=1000){
.fw-@{fw} { font-weight: 1*@fw !important; }
.loopFw((@fw+100))}
.loop(1);.
loopFw(100);
.flex { display: flex;}.flex-1 { flex: 1;}.flex-column { flex-direction: column;}.flex-align-center { align-items: center;}.flex-justify-center { justify-content: center;}.flex-justify-between { justify-content: space-between;}
