for-each.md

Deprecated. Use less-plugin-lists instead.

---

Generic for-each Structure in Less Using Mixins

Basic Usage

Less code:

@import "for";

@list: banana, apple, pear, potato, carrot, peach;

#basic-usage {
    .for(@list); .-each(@value) {
        value: @value;
    }
}

CSS output:

basic-usage {
  value: banana;
  value: apple;
  value: pear;
  value: potato;
  value: carrot;
  value: peach;
}

Practical Examples

Less code:

.transition(@properties, @value...) {
    .for(@properties); .-each(@property) {
        transition+: @property @value;
    }
}

div {
    @properties: color, background-color, border-color;
    .transition(@properties, 2s, ease-out);
}

.button {
    .transition(background-color border-color, 1s ease-in);
}

.another {
    .transition(all, 4s);
}

CSS output:

div {
  transition: color 2s ease-out, background-color 2s ease-out, border-color 2s ease-out;
}
.button {
  transition: background-color 1s ease-in, border-color 1s ease-in;
}
.another {
  transition: all 4s;
}

Less code:

#icon {
    .for(home ok cancel error book); .-each(@name) {
        &-@{name} {
            background-image: url("../images/@{name}.png");
        }
    }
}

CSS output:

#icon-home {
  background-image: url("../images/home.png");
}
#icon-ok {
  background-image: url("../images/ok.png");
}
#icon-cancel {
  background-image: url("../images/cancel.png");
}
#icon-error {
  background-image: url("../images/error.png");
}
#icon-book {
  background-image: url("../images/book.png");
}

More examples

Nested loops:

#nested-loops {
    .for(a b c); .-each(@a) {
        .for(1 2 3); .-each(@b) {
            x: @a @b;
        }
    }
}

output:

#nested-loops {
  x: a 1;
  x: a 2;
  x: a 3;
  x: b 1;
  x: b 2;
  x: b 3;
  x: c 1;
  x: c 2;
  x: c 3;
}