实时SASS编译器不编译列表操作

发布于 2025-01-20 15:50:16 字数 965 浏览 1 评论 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);"

这是为什么？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

没有心的人 2025-01-27 15:50:17

使用Glenn Marks的Live Sass编译器

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

，问题是由您使用的Visual Studio代码扩展程序引起

的

好吧 a href =“ https://marketplace.visualstudio.com/items?itemname=ritwickdey.live-sass” rel =“ nofollow noreferrer”> this 扩展：Ritwick Dey的Live Sass Compiler。它已被广泛使用，但不再得到作者的支持。因此，没有更新SASS版本。此扩展程序会产生您所描述的错误。