Re-usable logic

10-before.scss

html {
  @for $index from 1 through length($base-colors) {
    $base-color: nth($base-colors, $index);
    &.ui-theme-#{letter($index)} {
      background-color: $base-color;
    }
  }
}

20-after.scss

@mixin for-each($block) {
  @for $index from 1 through length($base-colors) {
    $base-color: nth($base-colors, $index);
    @eval $block, $index: $index, $base-color: $base-color, $letter: letter($index)
  }
}

html {
  @include for-each({ | $index, $base-color, $letter |
    &.ui-theme-#{$letter} {
      background-color: $base-color;
    }
  });
}

// -- OR (preferred, functions are just objects) --

html {
  @include for-each(@function($index, $base-color, $letter) {
    &.ui-theme-#{$letter} {
      background-color: $base-color;
    }
  });
}

// -- OR (implicit block, all arguments are available) --

html {
  @include for-each({
    &.ui-theme-#{$letter} {
      background-color: $base-color;
    }
  });
}