less css loop matrix

Question

I have a list of strings as such in LESS: @flag-codes: "Albania" "al", "United States" "us", ...; I created a loop in LESS which I have achieved by using:

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

As you can see I am also trying to generate a background-position property which will have the values based on the loop index, but that only on the x axis.

The image used is a PNG sprite that has a collection of sprites organised in a matrix (8 columns and 16 rows).

I have managed to figure out how to set the x property which will always have @index % 8, but on the y axis it will have to start from 1 to 16 and keep the 1 for 8 times (as many columns as we have) and after each 8 increase with a unit.

Is something as described above possible to do, and if so how would I do it?

seven-phases-max · Accepted Answer · 2014-06-30 00:04:10Z

2

That's pretty simple:

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

answered Jun 30, 2014 at 0:04

seven-phases-max

11.9k1 gold badge47 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Roland Over a year ago

is there a way to make the index start from 0 in the calculations but not in the loop?

Roland Over a year ago

Actually @index - 1 will do :)

Roland Over a year ago

Correction: @index - 1 will do for the x axis, but on the y axis only works up to the first row - 1 ...

seven-phases-max Over a year ago

I intentionally added 1 to y since you mentioned "y axis it will have to start from 1 to 16". If you actually need "0 to 15" instead then it simply would be @y: floor((@index / @columns));

Roland Over a year ago

that is what I tried, but the 8th, 16th, etc. (8nth) already get's the next index value, so the 8th for instance instead of still being 0 it is 1.

|

Collectives™ on Stack Overflow

less css loop matrix

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related