Using Bootstrap 4.3.1 and Error Occurs When Triggering compass watch

On  

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!

About Author:

I am a WordPress lover. I make my living using WordPress.

Leave A Comment

Your email address will not be published. Required fields are marked *