scss 用于CSS属性的REM Mixin

Posted 2021-05-18

// ----
// Sass (v3.3.14)
// ----

@function parseInt($n) {
  @return $n / ($n * 0 + 1);
}

@mixin rem($property, $values) {
  $px : ();
  $rem: ();
  @each $value in $values {
    @if $value == 0 or $value == auto {
      @if $value == 0 {
        $value: parseInt($value);
      }
      $px: append($px , $value);
      $rem: append($rem, $value);
    } @else {
      $unit: unit($value);
      $val: parseInt($value);
      @if $val == 0 {
        $px: append($px , $val);
        $rem: append($rem, $val);
      } @else {
        @if $unit == "px" {
          $px: append($px,  $value);
          $rem: append($rem, ($val / 10 + rem));
        }
        @if $unit == "rem" {
          $px: append($px,  ($val * 10 + px));
          $rem: append($rem, $value);
        }
      }
    }
  }
  @if $px == $rem {
    #{$property}: $px;
  } @else {
    #{$property}: $px;
    #{$property}: $rem;
  }
}