将 px 转换为 rem 的 mixin 上的 Sass 弃用警告

Question

我有一个可以将 px 转换为 rem 的 mixin。我最近在尝试构建时收到以下弃用警告。任何人都可以提出修复建议。

第 135 行的弃用警告 源/css/partials/global/mixins.scss： 在 Sass 的未来版本中，0px == 0 的结果将是 false。 无单位数字将不再等于有单位的相同数字。

@function parseInt($n) {
    @return $n / ($n * 0 + 1);
}

@mixin rem($property, $values) {
    $px: ();
    $rem: ();
    @each $value in $values {
        @if $value==0 or $value==auto {
            $px: append($px, $value);
            $rem: append($rem, $value);
        }
        @else {
            $unit: unit($value);
            $val: parseInt($value);
            @if $unit=="px" {
                $px: append($px, $value);
                $rem: append($rem, ($val / 16 + rem));
            }
            @if $unit=="rem" {
                $px: append($px, ($val * 16 + px));
                $rem: append($rem, $value);
            }
        }
    }
    @if $px==$rem {
        #{$property}: $px;
    }
    @else {
        #{$property}: $px;
        #{$property}: $rem;
    }
}

Answer 1

要解决弃用警告，您需要在与数字进行比较时删除单位。您可以使用自己的@function parseInt 轻松删除单元：

所以你需要将这个小技巧添加到你的@mixin：

@mixin rem($property, $values) {
    $px: ();
    $rem: ();
    @each $value in $values {
        // divide $value by 1 to remove the units in the comparison 
        @if parseInt($value) == 0 or $value == auto {
            $px: append($px, $value);
            $rem: append($rem, $value);
        }
        @else {
            $unit: unit($value);
            $val: parseInt($value);
            @if $unit=="px" {
                $px: append($px, $value);
                $rem: append($rem, ($val / 16 + rem));
            }
            @if $unit=="rem" {
                $px: append($px, ($val * 16 + px));
                $rem: append($rem, $value);
            }
        }
    }
    @if $px==$rem {
        #{$property}: $px;
    }
    @else {
        #{$property}: $px;
        #{$property}: $rem;
     }
}