Foundation gem Incompatible units: 'rem' and 'px'

Question

I've installed the foundation gem with the version 5.5.2.1. when I start the application i receive this error:

Showing /home/user/Scrivania/sites/store/app/views/layouts/application.html.erb where line #9 raised:

Incompatible units: 'rem' and 'px'.

Following some other case on the internet i tried to change the file _settings.scss on my gem folder:

../../var/lib/gems/2.1.0/gems/foundation-rails-5.5.2.1/vendor/assets/stylesheets/foundation/_settings.css

I've commented these lines:

$row-width: rem-calc(1000);
$column-gutter: rem-calc(30);
$total-columns: 12;

And i've set my custom $base-font-size:

 $base-font-size: 14px;
 $rem-base: $base-font-size;

I don't want to downgrade my gems, so can you help me with this error?

Answer 1

The problem is occurring somewhere in your SCSS because you are mixing rem-calc and px in a function, which will thrown an error. I ran into this same problem and fixed it by changing certain custom styles and overrides to rem-calc. You are probably overriding a variable that is conflicting with a default foundation style.

Here's an example of how this error might occur:

$my-font-size: rem-calc(18);
.my-class { 
  font-size: ($rem-number - 5px); 
}

However, this can still occur when you override a variable with a px value that Foundation uses in a function with rem-calc.

I would recommend going through your foundations_and_overrides.scssand see if you have overriden any variables with a px value, then change it to rem-calc. Overriding $topbar variables was the issue in my case.