Less Loop基本上降低了性能？

Question

我做了这个循环来生成特定任务所需的css代码。 （包括在页面底部）。 可以肯定地说，编写较少的循环可以减少开发时间，但也会产生不必要的代码样式吗？ 我可以看到使用这种技术的很多好处，但没有一个包括性能优化方面。

    @items : 12;
@color-base : red;
@slice : 30deg;
.looop (@i) when (@i>0){
  .looop(@i - 1);
  li:nth-child(@{i}){
    transform: rotate((@i*@slice)-30) skewY(-2*@slice);
    .text {
      background  : spin(@color-base, 30);
    }
  }
}
.looop(@items);

Answer 1

您可以稍微优化一下：

@items : 12;
@excluded-items: 1, 2, 5;
@color-base : red;
@slice : 30deg;

.looop (@i) when (@i>0) {
  .looop(@i - 1);

  li:nth-child(@{i}){
    transform: rotate((@i*@slice)-30) skewY(-2*@slice);
  }
}

.looop(@items);

li {
  .text {
      background  : spin(@color-base, 30);
    }
}