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.

Answer 2

I was getting this same error for Bootstrap 4.3 (https://getbootstrap.com/docs/4.3) in the _root.scss file.

I'm using CodeKit to compile Scss and it was pretty out of date. I realised that it didn't like to compile --#{$varname where -- and # live next to each other without a string in between. Whereas this line worked fine: --breakpoint-#{$bp}: #{$value};

My solution:

Updating CodeKit fixed the issue so I imagine you're not using the latest version of Compass?

Answer 3

Don't make any changes in the code. Just upgrade the version of sass gem that you are using. You can install the latest version using gem install sass.

I had version 3.4.25 and it was giving me the exact same error. I installed version 3.7.4 and everything is fine.

Check here for more information - https://github.com/sass/sass/issues/2383#issuecomment-399755755

Answer 4

change to

--#{''+$color+''}: #{$value};

and worked :)

Answer 5

My solution was to wrap the '--' into a sass variable:

#{'--'}#{$color}: #{$value};