Live Sass 编译器不编译列表操作

Question

我在 VS Code 中遇到 Live Sass compiler 问题，即在处理列表时。 None 的常规操作有效。在下面的示例中，它是 list.nth(list,index).

以下在 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);
   }  
 }

这在使用 Dart Sass CLI 本地编译时也能正常工作。

但是当我尝试在 VS Code 中使用 Live Sass 编译器编译它时，出现以下错误：

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

这是为什么？

Answer 1

您正在使用 does not seem to be maintained anymore, you can try to use this one 的扩展程序。

Answer 2

使用 Live Sass Glenn Marks 的编译器

我遇到了完全相同的问题。你看了SASS官网，按照说明，把代码写在Visual Studio代码里，然后在保存SASS或者S[=35的时候就出现了这个奇怪的Compilation Error =] 文件。你 double-check 一切似乎都应该工作，但它没有。

好吧，问题是由您用于将 SASS 或 SCSS 文件编译为 CSS 文件的 Visual Studio 代码扩展引起的.

不要使用此扩展程序：Live Sass Ritwick Dey 的编译器

您可能正在使用 this 扩展：Ritwick Dey 的 Live Sass 编译器。它被广泛使用，但作者不再支持它。因此，SASS 版本不会更新。此扩展会产生您所描述的错误。

使用此扩展：Live Sass Glenn Marks 编译器

您应该使用 this 扩展：Glenn Marks 的 Live Sass 编译器。正如作者所说：非常感谢@ritwickdey 所做的所有工作。但是，由于他们不再维护原始作品，我已经发布了我自己的作品。 此扩展将您的 SASS 或 SCSS 文件编译为 CSS 文件成功。