@each

Syntax

(event selector:event) {
    (...)
    @each item[, item2] in (array|object) {
        (...)
        (target selector) {
            (...)
            @each item[, item2] in (array|object) {
                (action commands)
            }
            (...)
        }
        (...)
    }
    (...)
}

The command used to iterate arrays or objects is the @each statement. It can handle different variable structures, including key/value object pairs.

The variable(s) that store the @each value during iteration are automatically set and scoped per the scoping rules.

Loops in Active CSS can be placed around either target selectors or action commands.

Nested @each loops are allowed (see the example at the bottom of this page).

@each loops, like all the commands in Active CSS, run in sequence, flowing downwards in the config.

You can either use an variable in the @each statement:

var: items [10, 20, 30, 40, 50];
@each item in {items} {
    console-log: "item is: {item}";
}

Or use the array or object directly in the @each statement:

@each item in [10, 20, 30, 40, 50] {
    console-log: "item is: {item}";
}

There now follows examples of possible uses of the @each statement, with both arrays and objects, including use of the break, continue, exit and exit-target control flow commands.

@each - basic use

@each - nested array

@each - array of objects

@each - with object

@each - within component

@each - no target selector

@each - nested loops

@each - looping action commands

@each - continue

@each - break

@each - exit

@each - exit-target