关于将px转换为rem

Question

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

第135行的弃权警告 源/ CSS /谐音/全球/ 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;
     }
}