less loop example

_loop.less

// ............................................................
// .for

.for(@i, @n) {.-each(@i)}
.for(@n)     when (isnumber(@n)) {.for(1, @n)}
.for(@i, @n) when not (@i = @n)  {
    .for((@i + (@n - @i) / abs(@n - @i)), @n);
}

// ............................................................
// .for-each

.for(@array)   when (default()) {.for-impl_(length(@array))}
.for-impl_(@i) when (@i > 1)    {.for-impl_((@i - 1))}
.for-impl_(@i) when (@i > 0)    {.-each(extract(@array, @i))}


// mixins


@colors: "teak", "navy-leather", "natural-leather", "ebony", "cognac-leather", "spice", "blue", "bamboo", "black-leather", "olive", "royal-blue", "purple", "walnut", "cognac", "slate", "chalk", "smoke", "crimson", "dark-teal", "violet", "navy", "raspberry", "red", "turquoise", "black";

@swatchWidth: 95px;
@swatchHeight: 95px;
@swatchMargin: 12px;

.bg-pos(@t, @l) {
  background-position: @l @t;
}

.bg-position(@r, @c, @h, @w, @m) {

  &when not (@r > 0) and not (@c > 0) {
    .bg-pos(0, 0);
  }

  // get row
  &when (@r > 0) and (@c > 0) {
    .bg-pos( -(@r * (@h + @m)), -(@c * (@w + @m)));
  }
  // first row
  &when not (@r > 0) and (@c > 0) {
    .bg-pos(0, -(@c * (@w + @m)));

  }

  &when (@r > 0) and not (@c > 0) {
    .bg-pos(-(@r * (@h + @m)), 0);
  }



}


.colors {
  .swatch {
    display: block;
    position: relative;
    width: @swatchWidth;
    height: @swatchHeight;
    // sprite sheet
    background: url(../images/sprite-colors.png) 0 0 no-repeat;
    // sprite sheet
    .for(@colors); .-each(@color) {
        @name: e(@color);
        @row: ceil((@i / 5) - 1);
        @col: mod((@i - 1), 5);
        &.@{name} {
          .bg-position(@row, @col, @swatchHeight, @swatchWidth, @swatchMargin);
        }

    }



    // individual images
    &.static {
      .for(@colors); .-each(@color) {
          @name: e(@color);
          @image: "../images/colors/@{name}.png";
          &.@{name} {
            background-image: url("@{image}");
          }
      }
    }

    &:hover {
      cursor: pointer;
      &:after {
        display: block;
      }
    }

    &:after {
      display: none;
      content: " ";
      position: absolute;
      width: (@swatchWidth + 2);
      height: (@swatchHeight + 2);
      top: 50%;
      left: 50%;
      margin: -((@swatchWidth + 2) / 2);
      background: none;
      border: 8px solid @c-white;
      border-radius: @swatchHeight;
    }

  }
}