使用更少的循环生成类

Question

我正在尝试在Less中生成边距类。我有代码：

.generate-margin(5);

.generate-margin(@n, @i: 1) when (@i =< @n) {

  .mb-@{i} {

    margin-bottom: (@i * 5px) !important;
  }
  .generate-margin(@n, (@i + 1));
}

哪个输出：

.mb-1 {
  margin-bottom: 5px !important;
}
.mb-2 {
  margin-bottom: 10px !important;
}
.mb-3 {
  margin-bottom: 15px !important;
}
.mb-4 {
  margin-bottom: 20px !important;
}
.mb-5 {
  margin-bottom: 25px !important;
}

但不是。mb-1，.mb-2，.mb-3，.mb-4，.mb-5，我想。mb-5，.mb-10，.mb- 15，.mb-20，.mb-25。怎么做。

Answer 1

我认为是逻辑：

.generate-margin(5);

.generate-margin(@n, @i: 1) when (@i =< @n) {
     .mb-@{i * 5} {
         margin-bottom: (@i * 5px) !important;
     }
    .generate-margin(@n, (@i + 1));
}

Answer 2

您可以创建一个变量来存储当前边距的大小：

.generate-margin(5);

.generate-margin(@n, @i: 1) when (@i =< @n) {

  @marginSize: @i*5;

  .mb-@{marginSize} {

    margin-bottom: (@i * 5px) !important;
  }
  .generate-margin(@n, (@i + 1));
}