CODEWITHSUNDEEP
sassmixins
Coplan Consulting
Coplan Consulting

Reputation: 19

SASS mixin error because of Deprecation

I am using the following mixin for REM conversions

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

Since the latest SASS update the mixin is now showing an error: 

// 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); } }

The result of 0px == 0 will be false in future releases of Sass. Unitless numbers will no longer be equal to the same numbers with units.

I am a bit new to SASS, can someone help trouble shoot this?

Upvotes: 1

Views: 1094

Answers (1)

cimmanon
cimmanon

Reputation: 68339

Are you sure it's an actual error rather than a warning?

The warning is likely in reference to this issue. The jist of the problem being fixed here is where 1px == 1, which is inherently untrue.

Realistically, you should always use 0 for lengths rather than 0px, despite the fact that they are equal, simply because you would be saving a few bytes. You should be able to strip off the unit and then perform the comparison:

$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);
}

Alternately, you could check if it is within a list of zero values:

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

Upvotes: 1

Related Questions