Visual Studio 代码中的语法错误“expected [css-rcurlyexpected]”

Question

我在注释行的可视代码中收到 [scss] }预期 [css-rcurlyexpected] 错误。有谁知道为什么吗？

@keyframes wordSlider {
  $steps: -0%, -25%, -50%, -75%;
  @for $index from 0 to length($steps)-1 {
    $next: $index + 1;
    $step: floor(100/ (length($steps)-1));
    $animation_step: floor($step * 0.2);
    //#{$step*$index}%,
    //#{($step*$next) - $animation_step}% {
    //   transform: translateY(nth($steps, $index + 1));
    //}
    100% {
      transform: translateY(nth($steps, length($steps)));
    }
  }
}

Answer 1

@keyframes wordSlider { 
    $steps: -0%, -25%, -50%, -75%; 
    @for $index from 0 to length($steps)-1 { 
        $next: $index + 1; 
        $step: floor(100/ (length($steps)-1)); 
        $animation_step: floor($step * 0.2); 
        //#{$step*$index}%, 
        //#{($step*$next) - $animation_step}% { 
        // transform: translateY(nth($steps, $index + 1));}// 

// Try closing your comment with ( //) //

Answer 2

如果您的意思是如果您取消注释行，则会发生错误，我认为 VSCode 不喜欢在

@keyframes

关键字内生成关键帧，因为它需要有效的 css 关键帧语法。

我遇到了同样的问题，可以通过用 Stylelint 验证替换 VSCode 中的本机 scss 验证来修复它。

1. 在 VSCode 中安装 Stylelint 扩展：https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint
2. 在您的项目中安装 Stylelint 和 SCSS 插件：

npm i -D stylelint stylelint-config-standard-scss

3. 在您的项目中创建一个 .stylelintrc.json：

{
 "extends": "stylelint-config-standard-scss"
}

4. 在 VSCode 配置 json 中禁用本机 scss 评估并启用 stylelint 评估：

"scss.validate": false,
"stylelint.validate": ["css", "scss"],

之前：

之后：