compass compile: Invalid CSS after "...lor}: #{$value}": expected "{", was ";")

Question

I am trying to handpick the parts of a certain theme/plugin we want to use in our site by tinkering with the source SCSS files. The theme in question is Vali Admin.

I haven't used SASS or LESS in ages. Not familiar with compiling them at all. I just installed ruby and the compass (through gem install) in my system, and ran compass compile on the root directory of the vendor theme. However I am getting the following error:

error sass/main.scss (Line 4 of sass/1-tools/bootstrap-source/_root.scss: Invalid CSS after "...lor}: #{$value}": expected "{", was ";")

I am also getting a couple of warnings about "interpolation near operators". I'll paste it here if needed.

I have no idea why I am getting that error. I haven't made any changes to the SCSS files yet, I am simply trying to compile the vendor source code.

Here is the SCSS:

:root {
  // Custom variable values only support SassScript inside `#{}`.
  @each $color, $value in $colors {
    --#{$color}: #{$value};
  }

  @each $color, $value in $theme-colors {
    --#{$color}: #{$value};
  }

  @each $bp, $value in $grid-breakpoints {
    --breakpoint-#{$bp}: #{$value};
  }

  // Use `inspect` for lists so that quoted items keep the quotes.
  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
  --font-family-sans-serif: #{inspect($font-family-sans-serif)};
  --font-family-monospace: #{inspect($font-family-monospace)};
}

Answer 1

Just delete of the double "-" in the following lines:

old: --#{$color}:
new: -#{$color}:

this works fine.