如何使用LESS CSS创建嵌套循环? [英] How do I create nested loops with LESS CSS?

问题描述

我知道的是:

@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等效:

… Making it the LESS equivalent of:

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

我的问题是:LESS等于什么?

My question is: What would the LESS equivalent of:

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

...看起来像什么?

… Look like?

推荐答案

嗯，没关系-我自己找到的.

Hm, nevermind—Found it myself.

为了后代的缘故，我在这里留下答案:

I’m leaving the answer here for posterity’s sake:

@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);

这篇关于如何使用LESS CSS创建嵌套循环?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！