Question

我在LESS中有一个字符串列表：@flag-codes: "Albania" "al", "United States" "us", ...;我在LESS中创建了一个循环，我通过使用它来实现：

.flag-classes(@flags; @index: 1) when (@index <= length(@flag-codes)) {

    @flag: extract(@flags, @index);

    @name:  extract(@flag, 1);
    @code: e(extract(@flag, 2));


    // X Y

    .flag-@{code} {
        background-position: (24 * mod(@index, 8)) mod(@index, 16);
    }

    .flag-classes(@flags; (@index + 1));
}


.flag-classes(@flag-codes);

正如您所看到的，我也在尝试生成background-position属性，该属性的值基于循环索引，但仅在x轴上。

使用的图像是一个PNG精灵，它有一个以矩阵（8列和16行）组织的精灵集合。

我已设法弄清楚如何设置始终具有x的{{1}}属性，但在@index % 8轴上，它必须从1到16开始并保持1次8次（尽可能多的列）和每次增加8次后单位。

上述内容是否可行，如果是，我该怎么做？

Answer 1

这很简单：

.flag-@{code} {
    @columns: 8;
    @x: (24 * mod(@index, @columns));
    @y: floor((@index / @columns + 1));
    background-position: @x @y;
}

较少的css循环矩阵

1 个答案: