基于less制作一个类名带参的设想

Question

最近在项目中手写类名时突发奇想,有没有一个库(最好是基于less的),可以实现class类名携带参数,大致效果如下:

<div className="mb-20"/>

<div className="mb-40"/>

.mb(x) {
  margin-bottom: {x}px
}

如果有,希望有大 佬能够告知,没有的话,希望有大 佬能留下点思路

暂时说下我的思路,之前做vue项目的时候,做过类似的东西,不过是用js进行实现的,把style的某一项写成一个变量,然后通过赋值以及js计算的方式进行获取style样式实现.但是总感觉很麻烦,而且我记得当时的情况是因为这个变量要从后端给的数据推算得出,不然在已知的情况下(比如我知道想要个margin-bottom20px),上面那种用js计算的方式还不如直接写less.

现在项目上的需求是做一个类名库,方便未来需要加样式时直接赋值一个类名就搞定,但是如果没有函数之类的计算的方法的话,那基本相同的样式我可能至少每个都要写好多个(比如mb-10,mb-20...).

一个优秀的程序员是要时时刻刻想着怎么偷懒的(手动狗头),所以如果有大 佬看到了且有思路的,请一定告诉下,orz

Answer 1

之前我想的是 粒度为5，从0开始，写到100，当然使用less的循环写。我主页里有之前的代码可以参考。
能使用的有margin、padding、height、width等等
做一个css表，然后项目直接引入就可以了。