Question

我试图将图像和颜色作为一组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);

Answer 1

您不需要通过变量名来模拟数组。较少的本机阵列支持：

@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();

循环背景图像和背景颜色较少

1 个答案: