Question

是否可以在LESS中循环使用颜色数组并为它们创建新的全局变量？

e.g

//array
@colors: 'main #0f0', 'second #f00', 'third #00f';

// what i would like to have:
@main-color: #0f0;
@second-color: #f00;
@third-color: #00f;

已经尝试了一些js循环等但我总是坚持实际将名称传递给一个新变量，或者更好地说用变量定义一个新变量

任何想法？

Answer 1

.colors(@mixin) {
    @helpercolorname: extract(@pp-module-variations, 1);
    .color-looper(
        1;
        @colorname:   @helpercolorname;
        @colorvalue: ~"@{pp-@{helpercolorname}-color}"
    ) ;
    .color-looper(@i;@colorname;@colorvalue) {
        @length: length(@pp-module-variations);
        @last: `( @{i} == @{length} )` ;
        & when (@last = false) {
            @colorname-intern:   extract(@pp-module-variations, @i + 1) ;
            @colorvalue-intern: ~"@{pp-@{colorname-intern}-color}";
            @mixin();
            .color-looper(@i + 1 ;@colorname:@colorname-intern;@colorvalue:@colorvalue-intern) ;
        }
        & when (@last = true) {
            @mixin();
        }
    }
}

这是我现在的循环工作正常。

我定义了一些这样的颜色

@pp-default-color: #22A7F0;

并将其添加到

@pp-module-variations: ~"default", some, other, colors;

这成功地循环播放此mixin上的所有颜色，并将名称和值传递给它。

.colors({
    .some-class-with-@{colorname} {
       color: @colorvalue;
    }   
})

Answer 2

这对我来说非常好

#colors(@list,@before,@after,@style) {
    @length: length(@list);
    .colors(@style,@name,@color) { @style(); }
   .-(@length);
    .-(@i) when (@i > 0) {
        @intern: extract(@list, @i); 
        .colors(@style,@intern,~"@{@{before}@{intern}@{after}}");
        .-(@i - 1);
    }

}

在这里我们称之为

#colors(@pp-module-variations;pp-;-color; {
    .colors-template(@name,@color);
});

欢迎任何改进建议

用less创建数组中的新变量

2 个答案: