Error compiling bootstrap.scss - Issue with _root.scss

Question

I am getting an error when compiling my bootstrap sass file. The error looks like this below. When I comment out lines 4 and 8 of _root.scss it works, but that is not an ideal solution. What's going on? - I am running the latest version of Sass 3.5.3

Error: Invalid CSS after "...lor}: #{$value}": expected "{", was ";"
        on line 4 of /Users/.../bootstrap-4.0.0/scss/_root.scss
  ...

1: :root {
2:   // Custom variable values only support SassScript inside `#{}`.
3:   @each $color, $value in $colors {
4:     --#{$color}: #{$value};
5:   }
6: 
7:   @each $color, $value in $theme-colors {
8:     --#{$color}: #{$value};
9:   }

Answer 1

It looks like a bug in SASS compiler itself. Here you have very similar issues:

• https://github.com/twbs/bootstrap/issues/24549

• https://github.com/sass/sass/issues/2383

Try this:

1: :root {
2:   // Custom variable values only support SassScript inside `#{}`.
3:   @each $color, $value in $colors {
4:     --color-#{$color}: #{$value};
5:   }
6: 
7:   @each $color, $value in $theme-colors {
8:     --color-#{$color}: #{$value};
9:   }