在 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) {
     .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));
}

在 Less 中使用循环生成类

Generate Classes Using Loop in Less

css

sass

less

在 Less 中使用循环生成 类

Generate Classes Using Loop in Less

css

sass

less

在 Less 中使用循环生成类