循环 background-img 和 background-color 少答案

【问题标题】：Loop background-img and background-color with less循环 background-img 和 background-color 少
【发布时间】：2015-04-08 08:49:22
【问题描述】：

我正在尝试循环图像和颜色作为一组 div 的背景。我可以在更少但不是颜色的帮助下循环出不同的图像。我尝试了很多方法都没有成功。这是我的工作代码，任何人都可以看到我可以做些什么来添加颜色。

@num-icons: 13;
@icon_color_1: #7FB3D4;
@icon_color_2: #767676;
@icon_color_3: #8CC079;
@icon_color_4: #b35d5d;
@icon_color_5: #b5473e;
@icon_color_6: #666;
@icon_color_7: #81BABD;
@icon_color_8: #AEA7CF;
@icon_color_9: #b5473e;
@icon_color_10: #666;
@icon_color_11: #81BABD;
@icon_color_12: #AEA7CF;


.loop(@i) when (@i > 0) {
    @tile-value: @i - 1;
    .icon_@{i} {
      background-image: url('@{images}icons/icon_@{i}.svg');
    }


  .loop((@i - 1));
}

.loop(@num-icons);

【问题讨论】：

标签： loops less

【解决方案1】：

您不需要通过变量名来模拟数组。 Less 具有原生数组支持：

@icon-colors: 
    #7FB3D4,
    #767676,
    #8CC079,
    #b35d5d,
    #b5473e,
       #666,
    #81BABD,
    #AEA7CF,
    #b5473e,
       #666,
    #81BABD,
    #AEA7CF;


.generate-icons(@i: length(@icon-colors)) when (@i > 0) {
    .generate-icons((@i - 1));
    .icon_@{i} {
        background-color: extract(@icon-colors, @i);
        background-image: url('@{images}icons/icon_@{i}.svg');
    }
}

.generate-icons();

【讨论】：