_auto-scaling.scss

@use "sass:math";
@use "sass:meta";
@use 'strip-unit';

/// It creates a responsive auto-scaling system
/// @param {number} $naturalPhoneSize The natural phone layout width
/// @param {number} $naturalTabletSize The natural tablet layout width
/// @param {number} $naturalDesktopSize The natural desktop layout width
/// @param {list} $phoneBreakpoints The list of breakpoints for which the phone layout will be scaled
/// @param {list} $tabletBreakpoints The list of breakpoints for which the tablet layout will be scaled
/// @param {list} $desktopBreakpoints The list of breakpoints for which the desktop layout will be scaled
///
@mixin auto-scaling(
  $naturalPhoneSize: 375,
  $naturalTabletSize: 768,
  $naturalDesktopSize: 1440,
  $phoneBreakpoints: (320, 360, 375, 414),
  $tabletBreakpoints: (600, 768, 800, 962),
  $desktopBreakpoints: (1024, 1152, 1280, 1366, 1440, 1536, 1600, 1920)
) {
  // generating mobile rules
  @if meta.type-of($naturalPhoneSize) == 'number' and meta.type-of($phoneBreakpoints) == 'list' {
    @each $phoneBreakpoint in $phoneBreakpoints {
      @if math.is-unitless($phoneBreakpoint) {
        $phoneBreakpoint: $phoneBreakpoint * 1px;
      }

      @media screen and (min-width: $phoneBreakpoint) {
        font-size: math.floor(math.div(strip-unit.strip-unit($phoneBreakpoint), strip-unit.strip-unit($naturalPhoneSize)) * 100) * 1%;
      }
    }
  }
  // generating tablet rules
  @if meta.type-of($naturalTabletSize) == 'number' and meta.type-of($tabletBreakpoints) == 'list' {
    @each $tabletBreakpoint in $tabletBreakpoints {
      @if math.is-unitless($tabletBreakpoint) {
        $tabletBreakpoint: $tabletBreakpoint * 1px;
      }

      @media screen and (min-width: $tabletBreakpoint) {
        font-size: math.floor(math.div(strip-unit.strip-unit($tabletBreakpoint), strip-unit.strip-unit($naturalTabletSize)) * 100) * 1%;
      }
    }
  }
  // generating desktop rules
  @if meta.type-of($naturalDesktopSize) == 'number' and meta.type-of($desktopBreakpoints) == 'list' {
    @each $desktopBreakpoint in $desktopBreakpoints {
      @if math.is-unitless($desktopBreakpoint) {
        $desktopBreakpoint: $desktopBreakpoint * 1px;
      }

      @media screen and (min-width: $desktopBreakpoint) {
        font-size: math.floor(math.div(strip-unit.strip-unit($desktopBreakpoint), strip-unit.strip-unit($naturalDesktopSize)) * 100) * 1%;
      }
    }
  }
}