活用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