Visual Studio Code - Sass Compiler - @each not supported-CodePudding

I'm trying to get my sass (with @each) compiled into css. As stated in: Visual Studio Code SASS compiler , the original LIVE SASS COMPILER by ritwick is no longer supported. A new one by Glenn Marks (same name) has surfaced, which claims to be updated:

https://github.com/glenn2223/vscode-live-sass-compiler/tree/a1b058d5b1e875efe3b1cf424abd43d40a419540

However, upon compiling, I am getting, for this piece of SASS:

//color combinations for eachs and mixins
$colors: blood, red, melon, melon2, blue, blue2, blue3, teal, green, green, green, green4, pink, pink2, pink3, orange, orange2, yellow, yellow2, purple, lavender, lilly, brown, gray, gray2, kosmos, soviet, black
@each $color in $colors
    &.color-#{$color}
         .explanation-sidebar ul li a:before,
         .explanation-actions .button
              background: $color

The following error:

Compilation Error
Error: Undefined variable.
     ╷
6546 │         &.color-#{$color}
     │                   ^^^^^^

The only other compiler (Dart sass) I've seen recommended does not seem to be compiling my sass either (only scss) so what is the next best option? Anyone else run into this before?

CodePudding user response：

I fixed it by:

1.- Disabling all the extensions (dartjs, live compiler)

2.- Installing sass manually using:

npm install -g sass

3.- Reactivating only 'live sass compiler' from glenn marks.

I am still puzzled by why this didn't work before. The weird behaviour of dartjs and other extensions is still beyond my understanding but for now, this will have to do.

Hopefully this will be of help to someone in the future.