Less 用更少的时间增加一个变量

是否可以用更少的时间增加变量

@i: 0;

.one { border: @i++; }
.two { border: @i++; }
.tree { border: @i++; }

或者以某种方式使用mixin，比如

.increase() {
    @i: @i+1;
    @increase: @i;
}

---

为了更好地解释这个问题：

---

简单地说，在不使用循环（mixin）的情况下，以较少的时间递增相同的变量是不可能的。这是因为变量的延迟加载较少，因此多个增量会导致递归定义错误。以下代码段：

@i:0；
.1{@i:@i+1；边框：@i；}
.two{@i:@i+1；边框：@i；}
.three{@i:@i+1；border:@i；}

在汇编时，将给出：

NameError:第4行第7列@i的递归变量定义：

使用类似于所讨论的mixin（

.increase（）

）仍然会导致与上述相同的错误

---

增量的最佳方法是使用mixin循环。对于问题中提供的修改样本，循环应如下所示：

@图标宽度：32px；
@社交网络：facebook、twitter、Google、pinterest、linkedin；/*具有网络列表的数组*/
.社会{
背景：url（“带有图片的片段”）；
.loop social（1）；/*调用初始值为1的循环*/
}
.loop social（@index）当（@index

上述较少的代码在编译时将生成以下CSS：

.social{
背景：url（“带有图片的片段”）；
}
.社交网站{
背景位置-x:-32px；
}
.social.twitter{
背景位置-x:-64px；
}
.social.googlep{
背景位置-x:-96px；
}
.social.pinterest{
背景位置-x:-128px；
}

我不熟悉循环。。。你能提供一个简单的例子吗？@Serge:我在结尾添加了一个示例循环。谢谢你的示例。为了更好地解释我的情况，我更新了OP。我使用了注释。显然，在放置注释的地方存在一些错误：它会循环并将注释放在不同的地方！：）@谢尔盖：哦，很抱歉。我只是编辑了一些评论，得到了同样的结果。我能理解为什么它把评论放在它做的地方。

@icon_width: 32px;

.social{
  background: url('snippet_with_n_images');

  .facebook:   background-position-x: -@icon_width*0;
  .twitter:    background-position-x: -@icon_width*1;
  .googlep:    background-position-x: -@icon_width*2;
  ...
  .pinterest:  background-position-x: -@icon_width*(n-1);
  .linkedin:   background-position-x: -@icon_width*n;

  /*be replaced by */
  .next(): {
     background-position-x: -@icon_width*@i++;
  }
  .facebook:   .next();
  .twitter:    .next();
  .googlep:    .next();
  ...
  .pinterest:  .next();
  .linkedin:   .next();
}