List Functions

each(collection, mixin)#

@import { each } from '@jesscss/fns';
@let list: 1, 2, 3;

@mixin iterate (value, key) {
  .icon-$(value) {
    width: $value;
    height: $key;
  }
}
@include $each(list, iterate);

note

Unlike Less, keys in lists align with JavaScript, and are therefore 0-based instead of 1-based. NOTE: Is that ideal?

This outputs:

.icon-1 {
  width: 1;
  height: 0;
}
.icon-2 {
  width: 2;
  height: 1;
}
.icon-3 {
  width: 3;
  height: 2;
}

Edit this page

each(collection, mixin)