less利用函数快速生成类似.mr-{x}边距样式

用过一些css库的的很多兄弟们都知道，很多库都内置了一些快速内置样式，就比如我经常使用的 .p-10 ，效果其实就是

.p-10{
    padding: 10px
}

有一些朋友在自己项目里没有使用库或者是原本的库本身是没有这些预置的数值的，因此，我们可以利用less的函数来实现快速生成，免得我们每次都手动去处理。

首先我们来生成外边距，定义一个函数

.generate-margin(@value) {
  .m-@{value} {
    margin: unit(@value, px);
  }
}

延伸拓展：less中的unit()是啥东西

这个意思就是说在我传入值的时候，会动态去生成下面对应的样式，例如

当我传入12的时候，就会生成如下内容

.m-12 {
    margin: 12px;
}

然后我们还需要配合一下我们的loop，来实现批量循环

.loop-generate-margin(@index: 1) when (@index <= 10) {
  .generate-margin(@index * 5);
  .loop-generate-margin(@index + 1);
}

我这边是做了一下限制的，我不希望生成太多，所以我设置了是循环10次，每次的传入的值乘以5，也就是会生成.m-5,.m-10这样5的倍数的，当然各位可以根据自己项目的需求来设置

虽然代码很少，但是生成出来的css也是和你填的数值有关，不是一股脑的填数字最大，到最后生成出来的文件也会特别的大。所以大家一定要根据自己的项目需求来

我一般是习惯把上下左右和内外放到一起写，下面我直接贴代码，有想高效完成任务的直接复制下面的即可使用

// 生成外边距
.generate-margin(@value) {
  .m-@{value} {
    margin: unit(@value, px);
  }
}

// 生成下边距
.generate-margin-bottom(@value) {
  .mb-@{value} {
    margin-bottom: unit(@value, px);
  }
}

// 生成上边距
.generate-margin-top(@value) {
  .mt-@{value} {
    margin-top: unit(@value, px);
  }
}

// 生成左边距
.generate-margin-left(@value) {
  .ml-@{value} {
    margin-left: unit(@value, px);
  }
}

// 生成右边距
.generate-margin-right(@value) {
  .mr-@{value} {
    margin-right: unit(@value, px);
  }
}

.loop-generate-margin(@index: 1) when (@index <= 10) {
  .generate-margin(@index * 5);
  .generate-margin-bottom(@index * 5);
  .generate-margin-top(@index * 5);
  .generate-margin-left(@index * 5);
  .generate-margin-right(@index * 5);
  .loop-generate-margin(@index + 1);
}

.loop-generate-margin();