Question

我想使用递归的，受保护的mixins（和LESS编译器版本1.7）生成多个具有混合精灵的类。

基本思想如下：

.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));

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

现在我面临着许多限制：

我的精灵是使用http://zerosprites.com/生成的;因此，sprite mixin类的名称 .icon _ 取自图像文件名，因此不应修改。
.toggle 的结构由我的小部件库确定，应保持不变。这可以防止我直接在标记中将特定的精灵图像类分配给 .img-holder 。

你能想到一个解决方法（最好只使用LESS）吗？

如何将生成的精灵mixins混合到LESS中循环生成的类中？

0 个答案: