css - 关于将 px 转换为 rem 的 mixin 的 Sass 弃用警告

Question

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

第 135 行的弃用警告来源/css/partials/global/mixins.scss:0px == 0 的结果在 Sass 的 future 版本中将为 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;
     }
}