Foundation SCSS编译报错：em与rem单位不兼容，寻求解决方案

Hey there, let's tackle that frustrating "Incompatible units: 'em' and 'rem'" error you're hitting when compiling Foundation's Sass files. I've dealt with this exact issue before, so let's break down what's happening and how to fix it.

First, quick context: Sass throws this error when you try to do arithmetic operations (addition, subtraction, multiplication, etc.) that mix em and rem units. These are both relative units but calculated differently, so Sass won't let you combine them directly. Foundation's core code is solid, so this almost always comes from your custom code, variable overrides, or a third-party extension you're using alongside Foundation.

Here are the actionable steps to resolve this:

• Start with your custom SCSS code
  Dig into any custom styles or variable overrides you've added to your foundation.scss file or imported into it. Look for lines where you're mixing em and rem in calculations, like this problematic example:

  // ❌ Bad: Mixes em and rem in an operation
  $custom-button-padding: 0.8em + 0.2rem;
  

  Fix this by sticking to one unit type. If you need to convert between them, use a base font size (usually 16px for root) to normalize:

  // ✅ Good: Convert rem to em first (assuming root font is 16px)
  $root-font-size: 16px;
  $custom-button-padding: 0.8em + (0.2rem / ($root-font-size / 1rem));
  

• Verify your Foundation variable overrides
  When you override Foundation's built-in variables, make sure your unit matches the default. For example, if Foundation's $global-radius defaults to rem, don't override it with em—this can trigger internal calculations in Foundation that mix units. Double-check the default units for variables you're overriding (you can find these in Foundation's core _variables.scss files) and keep them consistent.

• Check third-party Foundation extensions
  If you're using any third-party SCSS plugins or components built for Foundation, their code might be the culprit. Look through those files for mixed-unit operations, and adjust them to use a single unit type, just like you would with your own code.

• Use Sass debugging to pinpoint the issue
  If you're not sure where the conflict is happening, use Sass's @debug function to inspect variables or properties. For example, add this line near code you suspect:

  @debug unit($suspect-variable); // Outputs the unit of the variable to your console
  

  This will help you quickly zero in on which variable or line is causing the unit mismatch.

• Try adjusting your Foundation version (last resort)
  Even though you've reinstalled Foundation, it's possible a specific version has a rare bug related to unit handling. Try downgrading to the previous stable release or upgrading to the latest one (make sure to back up your project first!) to see if the error goes away.

Most of the time, fixing this just requires tracking down a mixed-unit calculation in your own code or variable overrides—start there, and you'll have it sorted in no time.

内容的提问来源于stack exchange，提问作者Dazeh