Less 如何在生成的sprite mixin中混合，以较少的时间循环生成的类？

我希望使用递归的、受保护的mixin（以及更少的编译器版本1.7），使用mixed-in-sprite生成多个类

基本思想如下所示：

.sprite-img {
    background: url("sprite.png") no-repeat;
}
.icon_1 { width: 26px; height: 23px; background-position: -27px -27px; }
.icon_1_hover { width: 26px; height: 23px; background-position: -73px -51px; }
.icon_2 { width: 26px; height: 22px; background-position: -73px -28px; }
.icon_2_hover { width: 26px; height: 22px; background-position: 0 -48px; }

// setup some lists
@colors: #efa, #a77 ...;
@IDs: 1, 10,...;
.generate-colored-toggles(@n, @i: 1) when ( @i =< @n) {
    @c: extract(@colors, @i); // subtracts 1 from index for list access
    @j: extract(@IDs, @i);

    .container .toggle._@{j} .img-holder {
        border-color: @c;
        .sprite;

        /* LESS compiler error: */
        .icon_@{i}; // adding parentheses won't work either
        &:hover {
            .icon_@{i}_hover;
        }
    }

    .generate-colored-toggles(@n, (@i + 1)); // recurse
}
.generate-colored-toggles(length(@colors));

.sprite img{
背景：url（“sprite.png”）不重复；
}
.icon_1{宽度：26px；高度：23px；背景位置：-27px-27px；}
.icon_1_悬停{宽度：26px；高度：23px；背景位置：-73px-51px；}
.icon_2{宽度：26px；高度：22px；背景位置：-73px-28px；}
.icon_2_悬停{宽度：26px；高度：22px；背景位置：0-48px；}
//设置一些列表
@颜色：#全民教育，#a77。。。；
@ID:1，10，。。。；
。在（@i=<@n）时生成彩色切换（@n，@i:1）{
@c:extract（@colors，@i）；//从索引中减去1以访问列表
@j：提取物（@IDs，@i）；
.container.toggle.{j}.img holder{
边框颜色：@c；
(传说中的)精灵
/*更少的编译器错误：*/
.icon_@{i}；//添加括号也不起作用
&：悬停{
.图标悬停；
}
}
.生成彩色切换（@n，（@i+1））；//递归
}
.生成彩色切换（长度（@colors））；

生成的类（._1….._n）将在页面生成期间动态分配（在循环中，参见JSF的ui repeat）

现在我面临着许多限制：

• 我的精灵是使用；因此，sprite mixin class.icon_uu的名称取自图像文件名，因此不应修改
• .toggle的结构由我的小部件库决定，应该保持不变。这防止我将特定的sprite图像类直接指定给标记中的.img持有者

---

您能想到一种解决方法吗（最好只使用较少的名称）？

不支持（也不计划支持）插入被调用的mixin名称。我建议使用一种愚蠢的、因而无法匹敌的暴力方法：“大拷贝粘贴的mixin call thunk table”，比如or。（在一个完美的世界中，我建议你考虑切换到一些更智能/可定制的精灵生成工具/库）。我喜欢你的第二个解决方案，使用：扩展，因为背景定义在编译过程中不重复。我会接受这个答案，因为当我重新生成精灵时，“可插补”表保持有效。使其对于我的用例具有足够的可重用性和可维护性。