Undeclared variables using CSS LESS each function

Question

I am using WebCompiler in Visual Studio 2019 to compile some LESS files in my project.

The following LESS function causes VS to display green squiggly lines and the warning "Expected a selector for the style rule" and states that the @{value} variable is "Undeclared". The project however will successfully compile and the LESS is compiled correctly from ...

@selectors: blue, green, red;

each(@selectors, {
  .sel-@{value} {
    a: b;
  }
});

To the CSS...

.sel-blue {
  a: b;
}
.sel-green {
  a: b;
}
.sel-red {
  a: b;
}

I try another, almost identically formatted each function and get the same warnings as above, but this will NOT compile successfully. What am I missing?

@fontSizes: .25, .5, .75, 1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3, 3.25, 3.5, 3.75, 4;

each(@fontSizes, {
        
    .if-size-@{index} { 
        font-size: @{value}rem;
    }
});

Expected output ...

.if-size-1 {
    font-size: .25rem;
}
.if-size-2 {
    font-size: .5rem;
}
.if-size-3 {
    font-size: .75rem;
}
.if-size-4 {
    font-size: 1rem;
}
.if-size-5 {
    font-size: 1.25rem;
}