LESS Parse Error when Generating Dynamic Class Names with each() Function

Question

I'm trying to generate dynamic CSS class names using the each() function and string interpolation in LESS.

I've attempted the following code:

@spacing-sizes: 0 0.25 0.5 1 1.5 3;
@breakpoints: '' 'sm' 'md' 'lg' 'xl' 'xxl';
@breakpoint-widths: 0px 576px 768px 992px 1200px 1400px;

.generate-classes(@prefix, @size, @value) {
  .loop-breakpoints(@index: length(@breakpoints)) when (@index > 0) {
    @breakpoint: e(extract(@breakpoints, @index));
    @width: extract(@breakpoint-widths, @index);
    @class-name: ~"@{prefix}-@{size}@{breakpoint}";

    & when (default(@breakpoint)) {
      @{class-name} { @prefix: unit(@value, rem) !important; }
    } 
    & when not (default(@breakpoint)) {
      @media (min-width: @width) { @{class-name} { @prefix: unit(@value, rem) !important; } }
    }
    .loop-breakpoints(@index - 1);
  }
  .loop-breakpoints();
}

.generate-sizes(@index, @size) when (@index > -1) {
  .generate-classes("m", @index, @size);
  .generate-classes("mt", @index, @size);
  .generate-classes("mb", @index, @size);
  .generate-classes("ml", @index, @size);
  .generate-classes("mr", @index, @size);
  .generate-classes("mx", @index, @size);
  .generate-classes("my", @index, @size);

  .generate-classes("p", @index, @size);
  .generate-classes("pt", @index, @size);
  .generate-classes("pb", @index, @size);
  .generate-classes("pl", @index, @size);
  .generate-classes("pr", @index, @size);
  .generate-classes("px", @index, @size);
  .generate-classes("py", @index, @size);

  .generate-sizes(@index - 1, @size);
}

.each(@spacing-sizes, .(@value, @index) {
  .generate-sizes(@index - 1, @value);
});

However, I'm encountering a parse error which is not very descriptive:

fatal error: parse error: failed at ); line: 44

I've tried different approaches, such as trying out a different syntax like this:

each(@spacing-sizes, {
  .generate-sizes(@index - 1, @value);
});

, but I'm still getting the same error.