[SOLVED] Live Sass compiler does not compile list operations

Live Sass compiler does not compile list operations

I have an issue with the Live Sass compiler in VS Code, namely when working with lists. None of the usual operations work. In the following example, it's list.nth(list,index).

The following works fine in a Codepen:

HTML

<p>red</p>
<p>blue</p>
<p>green</p>

SCSS

@use "sass:list";

p {
  font-size: 25x;
  font-weight: bold;
}

$colors: red blue green;

@for $n from 1 through 3 {
   p:nth-child(#{$n}) {
      color: list.nth($colors,$n);
   }  
 }

This also works fine when compiling it locally with the Dart Sass CLI.

But when I try to compile this with the Live Sass compiler in VS Code, I get the following error:

Compilation Error
Error: Invalid CSS after "...    color: list": expected expression (e.g. 1px, bold), was ".nth($colors, $n);"

Why is that?

Solution