Question

我正在使用以下mixin进行REM转换

https://gist.github.com/bitmanic/1134548

自最新的SASS更新以来，mixin现在显示错误：

// If the value is zero or a string or a color, return unchanged input
            @if $value == 0 or type-of($value) == "string" or type-of($value) == "color" {
                $rem-values: append($rem-values, $value); }
            @else {
                $rem-values: append($rem-values, $value / $baseline-rem); } }

0px == 0的结果在将来的Sass版本中将为false。无单位数将不再等于单位相同的数字。

我对SASS有点新鲜，有人可以帮忙解决这个问题吗？

Answer 1

您确定它是实际错误而不是警告吗？

该警告可能会参考this issue。这里修复的问题的要点是1px == 1，这本质上是不真实的。

实际上，你应该总是使用0作为长度而不是0px，尽管事实上它们是相等的，只是因为你会节省几个字节。你应该能够剥离单位，然后进行比较：

$baseline_px: 10px;

@mixin rem($property, $px_values) {
    // Convert the baseline into rems
    $baseline_rem: ($baseline_px / 1rem);

    // Print the first line in pixel values
    #{$property}: $px_values;

    // Create an empty list that we can dump values into
    $rem_values: ();

    @each $value in $px_values {
        // If the value is zero, return 0
        @if $value / ($value * 0 + 1) { 
            $rem_values: append($rem_values, $value);
            zero: $value;
        }
        // If the value is not zero, convert it from px to rem
        @else {
            $rem_values: append($rem_values, ($value / $baseline_rem) );
            not-zero: $value
        }
    }

    // Return the property and its list of converted values
    #{$property}: $rem_values;
}

.foo {
    @include rem(font-size, 10px);
    @include rem(border-width, 0px);
    @include rem(border-width, 0);
}

或者，您可以检查它是否在零值列表中：

@if index((0, 0px), $value) {
    // do 0 related stuff
}

由于弃用，SASS mixin错误

1 个答案: