live Sass 编译不编译列表操作

Question

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?

Answer 1

Use Live Sass Compiler by Glenn Marks

I had exactly the same problem. You read the SASS official website, follow the instructions, write the code in Visual Studio Code, and then you get this strange Compilation Error when saving the SASS or SCSS file. You double-check everything and it seems like it should work, but it doesn't.

Well, the problem is caused by the Visual Studio Code extension you are using for compiling SASS or SCSS files to CSS files.

Don't use this extension: Live Sass Compiler by Ritwick Dey

You are probably using this extension: Live Sass Compiler by Ritwick Dey. It's widely used, but is no longer supported by the author. Consequently, the SASS version isn't updated. This extension produces the error you are describing.

Use this extension: Live Sass Compiler by Glenn Marks

You should use this extension: Live Sass Compiler by Glenn Marks. As the author states: A big thank you to @ritwickdey for all his work. However, as they are no longer maintaining the original work, I have released my own which has been built upon it. This extension compiles your SASS or SCSS files to CSS files successfully.

Answer 2

The extension you are using does not seem to be maintained anymore , you can try to use this one instead.