活用less：遍历生成margin/padding/fontSize等类名

起因： 之前项目里写margin/padding之类的样式都是用的穷举的方式，实在觉得冗余又繁琐。下面直接贴代码，解放你的双手

一、

/*
    margin padding fontSize width 通用样式表
    免去你每次重写样式的烦恼
    marked by Jacky
*/
.loopStyle(@counter) when (@counter > 0) {
    .p-@{counter} {
      padding: (1vw * @counter);
    }
    .p-t-@{counter} {
      padding-top: (1vw * @counter);
    }
    .p-r-@{counter} {
      padding-right: (1vw * @counter);
    }
    .p-b-@{counter} {
      padding-bottom: (1vw * @counter);
    }
    .p-l-@{counter} {
      padding-left: (1vw * @counter);
    }
    .m-@{counter} {
      margin: (1vw * @counter);
    }
    .m-t-@{counter} {
      margin-top: (1vw * @counter);
    }
    .m-r-@{counter} {
      margin-right: (1vw * @counter);
    }
    .m-b-@{counter} {
      margin-bottom: (1vw * @counter);
    }
    .m-l-@{counter} {
      margin-left: (1vw * @counter);
    }
    .fz-@{counter} {
      font-size: (1vw * @counter);
    }
    .width@{counter}{
      width: 1% * @counter;
    }
    .loopStyle((@counter - 1));    // 递归调用自身
}
   
.loopStyle(100);

项目里引用方法：

<div className="m-t-10"></div> // 对应less样式 marginTop: 10vw

完结，撒花～

补充： 如果用的scss， 可以参考这篇文章： https://blog.csdn.net/byc233518/article/details/86582906