fluid typography in scss

fluid-typography.scss

// Define the base font-size and line-height
$base-font-size: 16px;
$base-line-height: 1.5;

// Define a mixin for setting font-size and line-height in rem units
@mixin font-size-rem($size, $line-height) {
  font-size: ($size / $base-font-size) + rem;
  line-height: ($line-height / $size);
}

// Define a mixin for creating media queries
@mixin media-query($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @warn "Invalid breakpoint #{$breakpoint} specified.";
  }
}

// Define a mixin for setting font-size and line-height based on the viewport width
@mixin fluid-typography($min-size, $max-size, $min-line-height, $max-line-height) {
  font-size: calc(
    #{$min-size} + (#{$max-size} - #{$min-size}) * ((100vw - #{map-get($breakpoints, sm)}) / #{map-get($breakpoints, xl) -
          map-get($breakpoints, sm)})
  );
  line-height: calc(
    #{$min-line-height} + (#{$max-line-height} - #{$min-line-height}) * ((100vw - #{map-get($breakpoints, sm)}) / #{map-get(
            $breakpoints,
            xl
          ) - map-get($breakpoints, sm)})
  );

  @include media-query(sm) {
    @include font-size-rem($min-size, $min-line-height);
  }

  @include media-query(xl) {
    @include font-size-rem($max-size, $max-line-height);
  }
}

// Usage example
.example-class {
  @include fluid-typography(14px, 18px, 1.4, 1.6);
}