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

尽量保持尽可能接近陈述的陈述性质 CSS，Less选择通过guarded实现条件执行在@media查询的静脉中，使用mixins而不是if / else语句功能规格。

和

在Less中，mixin可以调用自己。这种递归混合，当组合时使用Guard表达式和模式匹配，可用于创建各种迭代/循环结构。

所以在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();
}

Answer 2

在Less中，“pair”（最简单的形式）也可以表示为数组，因此它可以简单如下：

@import "for";

@array: alice black, bob orange;

.for(@array); .-each(@value) {
    @name:  extract(@value, 1);
    @color: extract(@value, 2);
    .cl-@{name} {
        background-color: @color;
    }
}

但请注意，“。for”的内容仅限于the only loop per scope，所以最好将上面的内容重写为以下内容：

@import "for";

@array: alice black, bob orange;

.cl- {
    .for(@array); .-each(@value) {
        @name:  extract(@value, 1);
        &@{name} {
            background-color: extract(@value, 2);
        }
    }
}

可以找到导入的"for"代码段（它只是递归Less循环的包装混合）here（带有示例here和here）。

Answer 3

虽然从其他答案中知道Less支持递归函数和mixins很有用，但现在对于这个简单问题有一个 much 更简单的答案。经过测试，该解决方案可以与Less v3.9一起使用，但在each was introduced时应可以回到Less v3.7。

.array() {
  alice: black;
  bob: orange;
}

each(.array(), {
  .cl-@{key} {
    background-color: @value;
  }
});

输出整洁：

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

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

想要更多吗？好吧，正如他们所说，“您还可以拥有更多”。使用@index在上面的公式中使用从1开始的索引。

Answer 4

这是一个＆＃34; parametric mixins＆＃34;您可以使用＆＃34; key：value＆＃34;对

＆＃34;键的数组：值＆＃34;对定义如下：@array：＆＃34; key：value＆＃34;，＆＃34; key：value＆＃34 ;;

// imported "for" snippet (it's just a wrapper mixin for recursive Less loops)
// http://is.gd/T8YTOR
@import "for";

// loop all items and generate CSS
.generate_all(@array) {
    .for(@array);
    .-each(@item) {
        @name: e(replace(@item, ':(.*)', ''));
        @value: replace(@item, '^[^:]*:', '');
        @{name} {
            z-index: e(@value);
        }
    }
}

<强>定义：

@array_test: ".test:9000", "header .mainNav:9000", "footer:8000", "li.myclass:5000";

<强> 测试

.generate_all(@array);

<强> 结果：

.test {
  z-index: 9000;
}
header .mainNav {
  z-index: 8000;
}
footer {
  z-index: 7000;
}
li.myclass {
  z-index: 5000;
}

使用 grunt + less@1.7.4

对我有用

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

4 个答案: