7

我所知道的是：

@iterations: 8;
.mixin-loop (@index) when (@index > 0) {

  .my-class-@{index} {
     width: (100% / @index);
  }

  .mixin-loop(@index - 1);
}
.mixin-loop (0) {}
.mixin-loop(@iterations);

......将导致：

.my-class-8{width:12.5%}
.my-class-7{width:14.285714285714286%}
.my-class-6{width:16.666666666666668%}
.my-class-5{width:20%}
.my-class-4{width:25%}
.my-class-3{width:33.333333333333336%}
.my-class-2{width:50%}
.my-class-1{width:100%}

……使它的 LESS 等同于：

for (var i = 8; i > 0; -- i) {
  // …
}

我的问题是：LESS 相当于：

for (var i = 8; i > 0; -- i) {
  for (var j = 4; j > 0; -- j) {
    // …
  }
}

… 看起来像？

4

4 回答 4

12

嗯，没关系——我自己找到的。

为了后代，我将答案留在这里：

@maxi: 8;
.i-loop (@i) when (@i > 0) {

  @maxj: 8;
  .j-loop (@j) when (@j > 0) {

    .my-class-@{i}-@{j} {
      width: (100% / @i);
      height: (100% / @j);
    }

    .j-loop(@j - 1);
  }
  .j-loop (0) {}
  .j-loop(@maxj);

  .i-loop(@i - 1);
}
.i-loop (0) {}
.i-loop(@maxi);
于 2013-06-10T12:06:12.220 回答
1

未嵌套的解决方案

我只是在这里提供这个作为最终输出代码目的的替代方案。我的回答并没有真正直接解决循环的嵌套问题（因为您的问题是并且您自己的回答找到了该解决方案）。相反，它挑战嵌套是否最好地解决您面临的问题。

假设您拥有一个类结构（my-class-2-6例如），您可以通过不嵌套它们而是使用 CSS3 属性选择器将输出 CSS 选择器从 64 个减少到仅 16 个（这可能是不可取的，具体取决于您需要支持的目标浏览器）。因此，这个 LESS：

@maxi: 8;
@maxj: 8;
@iSelStart: ~'[class^=my-class-';
@jSelStart: ~'[class$=-';
@ijSelEnd: ~']';
.i-loop (@i) when (@i > 0) {

  @{iSelStart}@{i}@{ijSelEnd} {
     width: (100% / @i);
  }
  .i-loop(@i - 1);
}

.j-loop (@j) when (@j > 0) {

  @{jSelStart}@{j}@{ijSelEnd}  {
    height: (100% / @j);
  }

  .j-loop(@j - 1);
}
//stop loops
.i-loop (0) {}
.j-loop (0) {}
//itialize loops
.j-loop(@maxj);
.i-loop(@maxi);

变成这个 CSS：

[class$=-8] {
  height: 12.5%;
}
[class$=-7] {
  height: 14.285714285714286%;
}
[class$=-6] {
  height: 16.666666666666668%;
}
[class$=-5] {
  height: 20%;
}
[class$=-4] {
  height: 25%;
}
[class$=-3] {
  height: 33.333333333333336%;
}
[class$=-2] {
  height: 50%;
}
[class$=-1] {
  height: 100%;
}
[class^=my-class-8] {
  width: 12.5%;
}
[class^=my-class-7] {
  width: 14.285714285714286%;
}
[class^=my-class-6] {
  width: 16.666666666666668%;
}
[class^=my-class-5] {
  width: 20%;
}
[class^=my-class-4] {
  width: 25%;
}
[class^=my-class-3] {
  width: 33.333333333333336%;
}
[class^=my-class-2] {
  width: 50%;
}
[class^=my-class-1] {
  width: 100%;
}

因此， 的示例my-class-2-6将以给出 a 的类名的开头为目标，并以my-class-2给出 a的类名width: 50%的结尾为目标。-6height: 16.666666666666668%;

对于未来面临类似情况、只担心针对 CSS3 浏览器的用户来说，这只是一个想法。

更新：添加保护以防止错误定位

事后想到，如果你有各种类型的类可能有一个-1或-2等的结尾，那么你的结尾 CSS 可能需要一组额外的代码来帮助过滤那个类。因此，j上面的循环代码需要对选择器字符串进行更改，如下所示：

@{iSelStart}@{ijSelEnd}@{jSelStart}@{j}@{ijSelEnd}  { /*properties*/}

然后将输出这种格式的代码：

[class^=my-class-][class$=-1] {
  /*properties*/
}

这样，它专门寻找以my-class-结尾的“类” -1，并且会忽略选择另一个类，就像another-class-1上面的原始代码仍然会选择一样。这是否是一个问题将纯粹与一个站点中使用的设计和类命名有关。

于 2013-06-11T19:42:17.823 回答
0

老问题，但也许值得一提的是，Less 现在可以更轻松地做到这一点

功能

.for(@i, @n, @r){@r();._(@i)}
.for(@n, @r)when(isnumber(@n)){.for(0, @n, @r)}
.for(@i, @n, @r)when not(@i = @n - 1){.for((@i + ((@n - @i) / abs(@n - @i))), @n, @r)}

用法

.for(3, {._(@i) {
  .for(3, {._(@j) {
    item-@{i}-@{j} {
      i: @i;
      j: @j;
    }
  }});
}});

示例：Codepen

于 2015-04-03T10:42:20.877 回答
0 
.loop(@n: 1, @m: @n, @k: @n * @m) when(@k > 0) {
    .loop(@n, @m, @k - 1);

    @i: `Math.floor((@{k} - 1) / @{m})`;
    @j: @k - @i * @n - 1;

    /*
        @i runs up 1 to @n,
        @j runs up 1 to @m and
        @k runs up 1 to @n * @m

        for example:
    */

    &:nth-child(@{k}) {
        top: 50px * @i;
        left: 100px * @j;
    }
}

/* using: */
.loop(3,4);
于 2015-10-27T13:14:50.647 回答