使用LESS递归获取当前索引

Question

我想这样做:

我有这样一个数组:

@levels:'level_one','level_two','level_three','level_four','level_five','level_six','level_seven','level_eight';

这些级别中的每一个还具有对应的变量,该变量是颜色,并且匹配级别指示符的列表标记中的类.我能够轻松地遍历这些以生成每个级别的背景颜色.

我希望能够为每个项目自动设置高度,所以从理论上讲,如果我想在指标中添加第9或第10级,我只需添加颜色变量,将其添加到数组并添加相关标记,必须在每个类上明确设置高度.

.for(@levels); .-each(@color) {
   @name: e(@color);
   &.@{name} {
      background:@@name;
   }
}

我正在循环上面的级别,但是以某种方式可以获得循环的当前索引以及@levels数组的计数来计算每个项目的基于百分比的高度？例如.如果有10个项目,第一个项目是10%的高度等等？

期待任何建议!

谢谢!

Answer 1

假设您正在使用for.less片段:范围中有其他@i可用.-each变量(该变量是从.-each调用者隐式继承的).

所以你可以把它写成(删除不必要的引号):

@levels:
    level_one,
    level_two,
    level_three,
    level_four,
    level_five,
    level_six,
    level_seven,
    level_eight;

.for(@levels); .-each(@name) {
    &.@{name} {
        background: @@name;
        height: (100% * @i / length(@levels));
    }
}

- - -

在Modern Less中,您将使用Lists插件实现相同的功能,其中.for-each语句已明确指定索引变量:

@levels:
    level_one,
    level_two,
    level_three,
    level_four,
    level_five,
    level_six,
    level_seven,
    level_eight;

.for-each(@name, @i in @levels) {
    &.@{name} {
        background: @@name;
        height: @i * 100% / length(@levels);
    }
}