_wasser.scss

@use 'sass:math';

$wasser-viewport-min: 320 !default;
$wasser-viewport-max: 1500 !default;
$wasser-scaling-ratio: 1.5 !default;
$wasser-scaling-ratio-font: 1.25 !default;
$wasser-font-size-to-line-height-ratio: $wasser-scaling-ratio !default;

/**
 * Basic wasser mixin, generates responsive property.
 * ---
 * @access public
 * ---
 * @param {string} $property - The property to be scaled
 * @param {number} $max — The max value for the property
 * @param {number|string} [$min] - The min value ot the property
 */
@mixin wasser($property, $max, $min: math.div($max, $wasser-scaling-ratio)) {
  @if type-of($max) != number {
    @error 'wasser: A number is expected as the second parameter.';
  }

  @include _getResponsiveProperty($max, $min, $property);
}

/**
 * Basic wasser mixin for responsive typography.
 * ---
 * @access public
 * ---
 * @param {number} $max — The max value for the property
 * @param {number|string} [$min] - The min value ot the property
 * @param {string} [$property] - The property, defaults to padding
 */
@mixin w-font(
  $max,
  $min: math.div($max, $wasser-scaling-ratio-font),
  $line-height-ratio: $wasser-font-size-to-line-height-ratio
) {
  @if type-of($max) != number {
    @error 'wasser: A number is expected as the first parameter.';
  }

  @include _getResponsiveProperty($max, $min, font-size);
  @include _getResponsiveProperty(
    $max * $line-height-ratio,
    $min * $line-height-ratio,
    line-height
  );
}

@mixin _getResponsiveProperty($max, $min, $property) {
  $max: _wasser-strip-unit($max);
  $min: _wasser-strip-unit($min);

  // This is where the magic happens ;)
  #{$property}: calc(
    #{$min}px + (#{$max} - #{$min}) * (100vw - #{$wasser-viewport-min}px) /
      (#{$wasser-viewport-max} - #{$wasser-viewport-min - 1})
  );

  @media (min-width: #{$wasser-viewport-max}px) {
    #{$property}: #{$max}px;
  }

  @media (max-width: #{$wasser-viewport-min}px) {
    #{$property}: #{$min}px;
  }

  @media print {
    #{$property}: #{$max}px;
  }
}

@function _wasser-strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}