0

我对 VS Code 中的Live Sass 编译器有疑问，即在使用列表时。通常的操作都不起作用。在以下示例中，它是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);"

这是为什么？

4

2 回答 2

1

您正在使用的扩展程序似乎不再维护，您可以尝试使用此扩展程序。

于 2022-02-21T06:51:00.197 回答
1

使用 Glenn Marks 的 Live Sass 编译器


我有完全相同的问题。您阅读了 SASS 官方网站，按照说明，在 Visual Studio Code 中编写代码，然后Compilation Error在保存 SASS 或 SCSS 文件时会感到奇怪。您仔细检查了所有内容，似乎它应该可以工作，但事实并非如此。

嗯，问题是由您用于将 SASS 或 SCSS 文件编译为 CSS 文件的 Visual Studio Code 扩展引起的。

不要使用这个扩展：Ritwick Dey 的 Live Sass Compiler

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

使用这个扩展：Glenn Marks 的 Live Sass 编译器

你应该使用这个扩展：Glenn Marks 的 Live Sass Compiler。正如作者所说：非常感谢@ritwickdey 所做的所有工作。然而，由于他们不再维护原始作品，我发布了我自己的作品，它是建立在它之上的。此扩展将您的 SASS 或 SCSS 文件成功编译为 CSS 文件。

于 2022-02-21T19:29:02.623 回答