Using Bootstrap 4.3.1 and Error Occurs When Triggering compass watch

Playing around with Twitter Bootstrap 4.3.1 is fun!

Initially, when triggering the compass watch from my terminal the error occurs like below:

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

The fix is simple. First, reinstall sass and compass to the latest version:

gem uninstall sass
gem uninstall compass

gem install sass
gem install compass

Then go to the _root.scss file in your bootstrap folder, and change the following codes:

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

To:

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

Run compass watch again and the error goes away. Cheers!