css - 在Mixin上将Sass弃用警告将px转换为rem

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

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

最佳答案

要解决弃用警告，您需要在与数字比较时删除单位。您可以使用自己的@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;
     }
}

关于css - 在Mixin上将Sass弃用警告将px转换为rem，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50588544/