PX-REM mixin仅适用于字体大小调整

时间:2014-11-13 12:46:50

标签: css sass mixins

因此,当使用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;

为什么会这样?

0 个答案:

没有答案