移动端mixin的px转rem

1、多属性传递

@mixin px2rems($pxs){
    @each $key, $value in $pxs{
        #{$key}: $value/$baseFontSize * 1rem;
    }
}

使用例子：

.a{
@include px2rems((font-size: 28,height: 90,line-height: 90,padding-left: 20,padding-right: 20));
}

生成css

.a {
  font-size: 0.37333rem;
  height: 1.2rem;
  line-height: 1.2rem;
  padding-left: 0.26667rem;
  padding-right: 0.26667rem; }

2、属性多值传递

@mixin remCalc($property, $values...) {
    $max: length($values);
    $remValues: '';
    @for $i from 1 through $max {
        $value: nth($values, $i);
        $remValues: #{$remValues + $value/$baseFontSize}rem;

        @if $i < $max {
            $remValues: #{$remValues + " "};
        }
    }
    #{$property}: $remValues; 
}

使用例子：

.a{
@include remCalc(padding,10,20);
}

生成css

padding: 0.13333rem 0.26667rem;

注意：文中$baseFontSize为不同设计稿的值，一般750px设计稿为75，即设计稿宽度/10的值