如何在较少的CSS中创建循环

Question

我开始在这种情况下使用css的预处理器减去css。我正在尝试实现填充循环。

来自less.org的示例刚修改

.generate-pad(10);

.generate-pad(@n, @i: 1) when (@i =< @n) {
  .padd-top-@{i} {
    padding-top: (@i * 100px / @n);
  }
  .generate-pad(@n, (@i + 1));
}

在编译时输出以下内容

.padd-top-1 {
  padding-top: 10px;
}
.padd-top-2 {
  padding-top: 20px;
}
.padd-top-3 {
  padding-top: 30px;
}
.padd-top-4 {
  padding-top: 40px;
}
.padd-top-5 {
  padding-top: 50px;
}
.padd-top-6 {
  padding-top: 60px;
}
.padd-top-7 {
  padding-top: 70px;
}
.padd-top-8 {
  padding-top: 80px;
}
.padd-top-9 {
  padding-top: 90px;
}
.padd-top-10 {
  padding-top: 100px;
}

但我正在尝试用变量替换.pad-top-@{i}，以便我稍后再调用它。如果可能的话，我怎样才能做到这一点。