syntax error in visual studio code "expected [css-rcurlyexpected]"

Question

I am getting [scss] } expected [css-rcurlyexpected] error in visual code for the commented line. Does anybody know why ?

@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)));
    }
  }
}

Conchoid

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 ( //) //

Gunning

Can you back yourself with some demo? – Trine

I guess @saurabh-kumar meant that there are errors if you uncomment the commented lines. – Unstrung

Answer 2

If you meant that the error occurs if you uncommend the commented lines, I think VSCode does not like genereated keyframes inside the @keyframes keyword because it expects a valid css keyframes syntax.

I had the same problem and could fix it by replacing the native scss validation in VSCode with Stylelint validation.

1. Install Stylelint extension in VSCode: https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint
2. Install Stylelint and SCSS plugin in your project:

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

3. Create a .stylelintrc.json in your project:

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

4. Disable native scss valudation and enable stylelint valudation in VSCode config json:

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

Before:

After:

Unstrung