如何用LESS自动生成一大串style

Question

.eg-pd-10 {
  padding: 10px
}
.eg-pd-20 {
  padding: 20px
}
.eg-pd-30 {
  padding: 30px
}
...
...
比如这里我希望能生成1-100之间的所以padding，怎么写这样的less。

Answer 1

大概这样子
请参考官方文档loops-feature

.generate-eg-pds(4);

.generate-eg-pds(@n, @i: 1) when (@i =< @n) {
  .eg-pd-@{i}0 {
    padding:@i*10px;
  }
  .generate-eg-pds(@n, (@i + 1));
}

Answer 2

.generate-eg-pd(1,100);
.generate-eg-pd(@i, @end) when (@i =< @end) {
  .eg-pd-@{i}{
    padding: @i*1px;
  }
  .generate-eg-pd(@i + 1,@end);
}

Answer 3

http://less.bootcss.com/featu...

//调用
.generate-padding(100);
//声明
.generate-padding(@n, @i: 1) when (@i =< @n) {
  .eg-pd-@{i} {
    padding: (@i * 1px);
  }
  .generate-padding(@n, (@i + 1));
}