using variables inside sass gives cssConflict warning

[oviirup]

Techstack

Tailwind - 3.3.1
Tailwind IntelliSense - 0.9.11
next - 13.3.1
pnpm - 8.3.1

Context

I am using TailwindCSS in sass for my NextJS project. I needed some for loop to assign a variable to children like this

@for $index from 1 through 10
  li:nth-child(#{$index})
    --index: #{$index}

I have to use #{$index} otherwise this won't work though the loop works fine. it gives unnecessary warnings.

Please help me to fix it or at least disable the warnings.

relevant screenshot

The syntax highlighting is from syler.sass-indented extension

I can ignore the warning by disabling the lining in settings.json but this is not a permanent solution.

{
  "[sass]": {
    "tailwindCSS.lint.cssConflict": "ignore",
    "editor.defaultFormatter": "syler.sass-indented"
  },
}