scss 响应型Mixin for Sass，取自postcss-responsive-typography

Posted 2021-05-18

/// Strip Unit from Value
///
/// @access public
/// @example
///   strip-unit(1px)
///   // 1
///   strip-unit(20rem)
///   // 20
/// @group helpers
/// @param {Number} $n - Value to Strip Unit from
/// @return {Number}
@function strip-unit($n) {
  @return $n / ($n * 0 + 1);
}

/// Convert px to rem
///
/// @access public
/// @example
///   pxtorem(16px)
///   // 1rem
///   pxtorem(20px, 10px)
///   // 2rem
/// @group helpers
/// @param {Number} $n - px Value to Convert to rem
/// @return {Number}
@function pxtorem($n, $root: 16px) {
  @return (strip-unit($n) / strip-unit($root)) * 1rem;
}

/// Responsive Typography
///
/// Creates a responsive font-size between given view sizes.
/// Values can be set in px or rem
///
/// Works on all modern browsers (IE9+).
///
/// @access public
/// @example
///   body {
///     @include font-responsive();
///   }
///
///   // Output
///   body {
///     font-size: calc(12px + 9 * ((100vw - 420px) / 860));
///   }
///   @media only screen and (max-width: 420px) {
///     body {
///       font-size: 12px;
///     }
///   }
///   @media only screen and (min-width: 1280px) {
///     body {
///       font-size: 21px;
///     }
///   }
///
///   body {
///     @include font-responsive(1rem, 2.5rem, 25rem, 75rem);
///   }
///
///   // Output
///   body {
///     font-size: calc(1rem + 1.5 * ((100vw - 25rem) / 50));
///   }
///   @media only screen and (max-width: 25rem) {
///     body {
///       font-size: 1rem;
///     }
///   }
///   @media only screen and (min-width: 75rem) {
///     body {
///       font-size: 2.5rem;
///     }
///   }
///
/// @group typography
/// @require {function} strip-unit
/// @require {function} pxtorem
/// @param {Number} $min-size [12px] - Minimum Font Size (can be px or rem)
/// @param {Number} $max-size [21px] - Maximum Font Size (can be px or rem)
/// @param {Number} $min-width [420px] - Maximum Screen Width to use Minimum Font Size (can be px or rem)
/// @param {Number} $max-width [1280px] - Maximum Screen Width to use Maximum Font Size (can be px or rem)
/// @param {Number} $root-size [16px] - Basic Font Size (px)
@mixin font-responsive($min-size: 12px, $max-size: 21px, $min-width: 420px, $max-width: 1280px, $root-size: 16px) {
  $size-unit: unit($min-size);
  $max-size-unit: unit($max-size);
  $width-unit: unit($min-width);
  $max-width-unit: unit($max-width);

  @if (($size-unit != $max-size-unit) or ($width-unit != $max-width-unit)) {
    @error 'min/max unit types must match';
  }

  @if ($size-unit == rem and $width-unit == px) {
    $min-width: pxtorem($min-width, $root-size);
    $max-width: pxtorem($max-width, $root-size);
  } @elseif ($size-unit != $width-unit and
            ($size-unit != rem or $width-unit != em)) {
    @error 'this combination of units is not supported';
  }

  $size-diff: strip-unit($max-size) - strip-unit($min-size);
  $width-diff: strip-unit($max-width) - strip-unit($min-width);

  $calculated: "#{$min-size} + #{$size-diff} * ((100vw - #{$min-width}) / #{$width-diff})";

  font-size: calc(#{unquote($calculated)});

  @media only screen and (max-width: $min-width) {
    font-size: $min-size;
  }

  @media only screen and (min-width: $max-width) {
    font-size: $max-size;
  }
}