Categories
Tips & Tricks

Using Bootstrap 4.3.1 and Error Occurs When Triggering compass watch

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

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!

By Vannkorn

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

Leave a Reply

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