less - 在LESS中循环遍历一组名称/值对

Question

有没有办法让LESS的名称/值对数组循环？像这样的东西:

arr = alice: black, bob: orange;

.for(arr) // something something //
   .cl-@{name} {
       background-color: @{value}
   }

要生成这样的内容:

.cl-alice { background-color: black; }
.cl-bob { background-color: orange; }

我知道您可以for-loop an array，但是我不确定它是否可以是对象数组而不是LESS中的值。

Answer 1

@ seven-phases-max给出的答案非常有效。为了完整起见，您还应该注意，在没有导入的"for"代码段的情况下，您可以在Less中执行相同的操作。

来自lesscss.org

In trying to stay as close as possible to the declarative nature of CSS, Less has opted to implement conditional execution via guarded mixins instead of if/else statements, in the vein of @media query feature specifications.

和

In Less a mixin can call itself. Such recursive mixins, when combined with Guard Expressions and Pattern Matching, can be used to create various iterative/loop structures.

因此，您可以在Less中编写:

@array: alice black, bob orange;

.createcolorclasses(@iterator:1) when(@iterator <= length(@array)) {
    @name: extract(extract(@array, @iterator),1);
    .cl-@{name} {
        background-color: extract(extract(@array, @iterator),2);
    }
    .createcolorclasses(@iterator + 1);
}
.createcolorclasses();

或确实:

@array: alice black, bob orange;

.createcolorclasses(@iterator:1) when(@iterator <= length(@array)) {
    @name: extract(extract(@array, @iterator),1);
    &@{name} {
        background-color: extract(extract(@array, @iterator),2);
    }
    .createcolorclasses(@iterator + 1);
}
.cl-{
    .createcolorclasses();
}