使用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%,依此类推?
期待任何建议!
谢谢!
假设您使用的是
在Modern Less中,您将使用 I'm trying to make this: I have an array like this: 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. 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 So you can write this as (with unnecessary quotes removed):
In Modern Less you'll achieve the same using the Lists plugin where the
这篇关于使用LESS递归获取当前索引的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!@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));
}
}
---
@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);
}
}
@levels:'level_one','level_two','level_three','level_four','level_five','level_six','level_seven','level_eight';
.for(@levels); .-each(@color) {
@name: e(@color);
&.@{name} {
background:@@name;
}
}
for.less
snippet: There's additional @i
variable available in the .-each
scope (the variable is implicitly inherited from .-each
's caller).@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));
}
}
- - -
.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);
}
}