Sass中px转rem混合宏的弃用警告问题及修复咨询

Hey there, let's tackle that deprecation warning you're facing. The core issue is exactly what the message spells out: in future Sass releases, 0px (a value with a unit) won't be treated as equal to 0 (unitless) anymore. This breaks your current check for zero values in the mixin.

Why the Warning Pops Up #

Your mixin uses this condition to handle zero/auto values:

@if $value==0 or $value==auto {

Right now, Sass lets 0px == 0 evaluate to true, but that behavior is being removed. We need to adjust how we detect zero values, regardless of whether they have a unit attached.

The Updated Mixin (Fixed for Future Sass Versions) #

Here's the revised code that eliminates the warning while keeping all your original functionality:

// Safely extract the numeric value from a unit-ed or unitless number
@function get-numeric-value($n) {
  @return $n / ($n * 0 + 1);
}

@mixin rem($property, $values) {
  $px-output: ();
  $rem-output: ();
  
  @each $value in $values {
    // Check if value is zero (any unit) or auto
    @if $value == auto or get-numeric-value($value) == 0 {
      $px-output: append($px-output, $value);
      $rem-output: append($rem-output, $value);
    } @else {
      $unit: unit($value);
      $val: get-numeric-value($value);
      
      @if $unit == "px" {
        $px-output: append($px-output, $value);
        $rem-output: append($rem-output, ($val / 16) + rem);
      }
      @if $unit == "rem" {
        $px-output: append($px-output, ($val * 16) + px);
        $rem-output: append($rem-output, $value);
      }
    }
  }
  
  // Updated equality check to handle zero values with/without units
  $values-match: true;
  @for $i from 1 through length($px-output) {
    $px-val: nth($px-output, $i);
    $rem-val: nth($rem-output, $i);
    
    @if not (get-numeric-value($px-val) == 0 and get-numeric-value($rem-val) == 0) and $px-val != $rem-val {
      $values-match: false;
    }
  }
  
  @if $values-match {
    #{$property}: $px-output;
  } @else {
    #{$property}: $px-output;
    #{$property}: $rem-output;
  }
}

Key Improvements Explained #

1. Zero Value Detection: Instead of checking $value == 0, we use get-numeric-value($value) == 0 which works for both 0 and 0px (or any other unit-ed zero).
2. Equality Check Overhaul: The original $px == $rem would fail in future versions if one list had 0 and the other had 0px. Now we loop through each value pair and verify they're either both zero (any unit) or exactly identical.
3. Clarified Function Naming: Renamed parseInt to get-numeric-value to better describe what it does (since it works for floats too, not just integers).

Simplified Alternative (If You Don't Need Reverse px Conversion) #

If you only need to generate px fallbacks for px inputs (and don't need to convert rem values back to px), you can simplify the mixin even further while still fixing the warning:

@function get-numeric-value($n) {
  @return $n / ($n * 0 + 1);
}

@mixin rem($property, $values) {
  $fallback: ();
  $rem-values: ();
  
  @each $value in $values {
    @if $value == auto or get-numeric-value($value) == 0 {
      $fallback: append($fallback, $value);
      $rem-values: append($rem-values, $value);
    } @else if unit($value) == "px" {
      $fallback: append($fallback, $value);
      $rem-values: append($rem-values, (get-numeric-value($value) / 16) + rem);
    } @else {
      // Pass through non-px/auto/zero values as-is
      $fallback: append($fallback, $value);
      $rem-values: append($rem-values, $value);
    }
  }
  
  #{$property}: $fallback;
  #{$property}: $rem-values;
}

This version drops the reverse px conversion for rem inputs (which is rarely needed in modern browsers) and keeps the code concise while resolving the deprecation issue.

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