Looping in LESS

Looping in LESS.markdown

Looping in LESS

A Pen by Cornell Campbell on CodePen.

License.

style.css

/* The above LESS compiles to: */
.tracker-report table tr.status-pre-approved {
  background: #09b257;
}
.tracker-report table tr.status-pre-approved,
.tracker-report table tr.status-pre-approved a {
  color: #ffffff;
}
.tracker-report table tr.status-pre-qualified {
  background: #598cd2;
}
.tracker-report table tr.status-pre-qualified,
.tracker-report table tr.status-pre-qualified a {
  color: #ffffff;
}
.tracker-report table tr.status-working {
  background: #b29fc5;
}
.tracker-report table tr.status-working,
.tracker-report table tr.status-working a {
  color: #ffffff;
}
.tracker-report table tr.status-yet-to-app {
  background: #f49650;
}
.tracker-report table tr.status-yet-to-app,
.tracker-report table tr.status-yet-to-app a {
  color: #ffffff;
}
.tracker-report table tr.status-yet-to-contact {
  background: #fc0019;
}
.tracker-report table tr.status-yet-to-contact,
.tracker-report table tr.status-yet-to-contact a {
  color: #ffffff;
}

style.less

@statuses:      pre-approved, pre-qualified, working, yet-to-app, yet-to-contact;
@status-colors: #09B257, #598CD2, #B29FC5, #F49650, #FC0019;

.generate-status-rows(@n, @i: 1) when (@i =< @n) {
  @status:      extract(@statuses, @i);
  @color:       extract(@status-colors, @i);
  @link-color:  contrast(extract(@status-colors, @i));
  
  &.status-@{status} {
    background: @color;
  }
  
  &.status-@{status},
  &.status-@{status} a {
    color: @link-color;
  }
  
  .generate-status-rows(@n, (@i + 1));
}

.tracker-report {
  table {
    tr {
      .generate-status-rows(length(@statuses));
    }
  }
}