PX-REM mixin only working with font-sizing

71 Views Asked by At

So I am using this mixin to generate px value fallbacks when using the rem unit:

@function fix8_unit_to_px($val) {
    @if unitless($val) {
        @if $val == 0 {
            @return $val
        } @else {
            @return $val * 10+px
        };
    } @else { @return $val};
}

@function fix8_unit_to_rem($val) {
    @if unitless($val) {
        @if $val == 0 {
            @return $val
        } @else {
            @return $val+rem
        };
    } @else { @return $val};
}

@mixin rem($prop, $val...) {
    $n: length($val);
    $i: 1;

    $px-list: ();
    $rem-list: ();

    @while $i <= $n {
        $px-list: append($px-list, fix8_unit_to_px(nth($val, $i)));
        $rem-list: append($rem-list, fix8_unit_to_rem(nth($val, $i)));
        $i: $i + 1;
    }

    @if $px-list == $rem-list {     /* 8 */
        #{$prop}: $px-list;  /* 9 */
    } @else {
       #{$prop}: $px-list;  /* 9 */
       #{$prop}: $rem-list; /* 9 */
    }
}

This works if I use it on font-sizing i.e.

@include rem(font-sizing, 1.4);

returns

font-sizing: 14px;
font-sizing: 1.4rem;

However if I use it for anything other than font-sizing, it only returns the rem value:

@include rem(margin-top, 1.4);

returns

margin-top: 1.4rem;

Why is this happening?

0

There are 0 best solutions below