css - PX-REM mixin only working with font-sizing -
so using mixin generate px value fallbacks when using 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 use on font-sizing i.e.
@include rem(font-sizing, 1.4);
returns
font-sizing: 14px; font-sizing: 1.4rem;
however if use other font-sizing, returns rem value:
@include rem(margin-top, 1.4);
returns
margin-top: 1.4rem;
why happening?
Comments
Post a Comment