使用LESS递归获取当前索引 [英] Get current index with LESS Recursion

问题描述

我正在努力做到这一点:

我有一个像这样的数组:

@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％，依此类推?

期待任何建议！

谢谢！

解决方案

假设您使用的是 @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中，您将使用 @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); } }

I'm trying to make this:

I have an array like this:

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

Each of those levels also has a corresponding variable which is a colour, and match a class in the list markup of the level indicator. I'm able to loop through these easily enough to generate out the background colours for each level.

I want to be able to have the heights automatically set for each item, so theoretically if I wanted to add a 9th or 10th level to the indicator, I just add the colour variable, add it to the array and add the relevant markup, without having to explicitly set the height on each class.

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

I'm looping through the levels like the above, but it is somehow possible to get the current index of the loop as well as the count of the @levels array to work out a percentage based height for each item? Eg. if there's 10 items, the first item is 10% in height etc etc.?

Looking forward to any suggestions!

Thanks!

解决方案

Assuming you're using for.less snippet: There's additional @i variable available in the .-each scope (the variable is implicitly inherited from .-each's caller).

So you can write this as (with unnecessary quotes removed):

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

- - -

In Modern Less you'll achieve the same using the Lists plugin where the .for-each statement has explicitly specified index variable:

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

这篇关于使用LESS递归获取当前索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！