Блог

У меня есть список строк как таковых в 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 свойство, которое всегда будет иметь @index % 8 значение, но на y оси оно должно начинаться с 1 до 16 и сохранять 1 в течение 8 раз (столько столбцов, сколько у нас есть) и после каждых 8 увеличиваться на единицу.

Возможно ли что-то, как описано выше, и если да, то как мне это сделать?

Это довольно просто:

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