在 Less 中使用循环生成类

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) {

  @marginSize: @i*5;

  .mb-@{marginSize} {

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

Answer 2

我认为它的逻辑：

.generate-margin(5);

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