_rem.scss

@use "sass:list";
@use "sass:math";
@use "sass:meta";

/// It provides a px-to-rem conversion
/// @param {number} $value The value to be converted
/// @param {number} $context The conversion factor
/// @param {number} $threshold The conversion threshold
/// @return {number} The converted value
///
@function rem($value, $context: 16px, $threshold: 2px) {
  // handling support for compound values (e.g. rem(12px 16px))
  @if meta.type-of($value) == 'list' {
    $values: ();
    @each $item in $value {
      // ignoring strings to support ambiguous values too (e.g. rem(solid 4px black))
      @if meta.type-of($item) == 'string' {
        $values: list.append($values, $item);
      } @else {
        $values: list.append($values, rem($item));
      }
    }
    @return $values;
  }
  // skipping exceptions
  @if meta.type-of($value) != 'number' or math.is-unitless($value) or math.unit($value) != 'px' or math.abs($value) <= $threshold {
    @return $value;
  }
  // handling conversion
  @return math.div($value, $context) * 1rem;
}