Sass предупреждение об устаревании на mixin, который преобразует px в rem

Question

У меня есть миксин, который конвертирует px в rem.Недавно я получил следующее предупреждение об устаревании при попытке собрать.Может кто-нибудь предложить исправление.

ПРЕДУПРЕЖДЕНИЕ ОБ УСТРОЙСТВЕ в строке 135 source / css / partials / global / mixins.scss: Результат 0px == 0 будет false в будущих выпусках Sass.Числа без единиц больше не будут совпадать с числами с единицами.

@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;
     }
}