moins matrice de boucle css

Question

J'ai une liste de chaînes en tant que telle dans MOINS: @flag-codes: "Albania" "al", "United States" "us", ...; J'ai créé une boucle en moins que j'ai réalisé en utilisant:

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

Comme vous pouvez le voir, je suis également en train de générer une propriété background-position qui aura les valeurs en fonction de l'indice de la boucle, mais seulement sur la x axe.

L'image utilisée est une image-objet PNG qui contient une collection de sprites organisés en matrice (8 colonnes et 16 lignes).

J'ai réussi à comprendre comment définir la propriété x qui aura toujours @index % 8, mais sur l'axe y il devra commencer de 1 à 16 et de garder les 1 pour 8 fois (autant de colonnes que nous avons) et après chaque 8 augmentation avec une unité.

Est-ce que quelque chose comme décrit ci-dessus est possible de faire, et si oui, comment le ferais-je?

Answer 1

C'est assez simple:

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