css - 使用 CSS LESS 每个函数的未声明变量

Question

我在 Visual Studio 2019 中使用 WebCompiler 在我的项目中编译一些 LESS 文件。

下面的 LESS 函数导致 VS 显示绿色波浪线和警告“预期样式规则的选择器”，并声明@{value}变量是“未声明”。然而，该项目将成功编译，并且 LESS 是从...正确编译的

@selectors: blue, green, red;

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

对 CSS...

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

我尝试了另一个格式几乎相同的each函数并得到与上面相同的警告，但这不会成功编译。我错过了什么？

@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;
    }
});

预期输出...

.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;
}