因此,当使用rem单元时,我使用此mixin生成px值回退:
@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 */
}
}
如果我在字体大小上使用
,这是有效的@include rem(font-sizing, 1.4);
返回
font-sizing: 14px;
font-sizing: 1.4rem;
但是,如果我将它用于font-sizing以外的任何内容,它只会返回rem值:
@include rem(margin-top, 1.4);
返回
margin-top: 1.4rem;
为什么会这样?