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