Sass 移动端 代码

// /*sass function mixin*/
@function px2rem($pxs, $base-font-size: 75px) {
    $result: '';

    @each $px in $pxs {
        $rem: $px;

        @if $result != '' {
            $result : $result + ' ';
        }

        @if type_of($px) == number {
            $rem : ($px / $base-font-size) * 1rem;
        }

        $result : $result + $rem;
    }

    @return unquote($result);
}

@mixin px2rem($property,$px-values,$baseline-px:16px,$support-for-ie:false){
  //Conver the baseline into rems
  $baseline-rem: $baseline-px / 1rem * 1;
  //Print the first line in pixel values
  @if $support-for-ie {
    #{$property}: $px-values;
  }
  //if there is only one (numeric) value, return the property/value line for it.
  @if type-of($px-values) == "number"{
    #{$property}: $px-values / $baseline-rem;
  }
  @else {
    //Create an empty list that we can dump values into
    $rem-values:();
    @each $value in $px-values{
      // If the value is zero or not a number, return it
      @if $value == 0 or type-of($value) != "number"{
        $rem-values: append($rem-values, $value / $baseline-rem);
      }
    }
    // Return the property and its list of converted values
    #{$property}: $rem-values;
  }
}
@mixin font-dpr($font-size) {
    font-size: $font-size;

    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }

    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}

多值传递
@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; 
}
多属性传递
@mixin px2rems($pxs){
    @each $key, $value in $pxs{
        #{$key}: $value/$baseFontSize * 1rem;
    }
}