Vannkorn

Full Stack WordPress Developer

Close

Using Bootstrap 4.3.1 and Error Occurs When Triggering compass watch

Sometimes, the problem is not caused by the latest of the technology, but the old environment you're relying on.

Ads: Register now via this link to receive $100 credit from Vultr

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!

Leave a Reply

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