Responsive font mixin with multiple arguments for use with media queries

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

$font-base-size-px: 16px;
$bp-m-l: 481px; // Breakpoint medium
$bp-l-xl: 769px; // Breakpoint large

$font-size-breakpoints: $bp-m-l, $bp-l-xl;

// ----------------------------------------------------------
// Rem mixin with pixel fallback
// ----------------------------------------------------------

@mixin rem($property, $px-values) {
  // Convert the baseline into rems
  $baseline-rem: $font-base-size-px / 1rem;

  // Print the first line in pixel values
  #{$property}: $px-values;

  // If there is only one (numeric) value, return the property/value line for it.
  @if type-of($px-values) == "number" {
    #{$property}: $px-values / $baseline-rem;
  } @else {
    // Create an empty list that we can dump values into
    $rem-values: unquote("");

    @each $value in $px-values {
      // If the value is zero, return 0
      @if $value == 0 {
        $rem-values: append($rem-values, $value); }
      @else {
        $rem-values: append($rem-values, $value / $baseline-rem);
      }
    }

    // Return the property and its list of converted values
    #{$property}: $rem-values;
  }
}
// ----------------------------------------------------------
// Font-size wrapper using our rem converter mixin
// Input is px value or px value followed by line height
// ----------------------------------------------------------

@mixin font-size( $font-settings ) {
  @if( length( $font-settings ) == 1 ) {
    @include rem(font-size, $font-settings);
  } @else {
    line-height: nth($font-settings, 2);
    @include rem(font-size, nth($font-settings, 1));
  }
}

// ----------------------------------------------------------
// Responsive font size mixin
// Input is (argument list) px value followed by line height
// ----------------------------------------------------------

@mixin font-sizes($args...){
  // Avoid error if $breakpoints is undefined
  $font-size-breakpoints: () !default;
  // Setting variable for internal use
  $bps: $font-size-breakpoints;
  
  @if( length($args) > 0 ){
    // Output first value as default
    @include font-size(nth($args, 1));
    
    @if( length($args) > 1 and length($bps) > 0 ){
      // Loop through the rest of the arguments
      // Ignore the first argument that we already used
      @for $i from 1 through (length($args) - 1) {
        // Check if there is a breakpoint available
        // for the current argument iteration
        @if( length($bps) >= $i  ) {
          @media (min-width: #{nth($bps, $i)}) {
            $i: $i + 1; // Ignore first argument
            @include font-size(nth($args, $i));
          }
        }
      }
    }
    
  } @else {
    @warn "You must provide at least one argument";
  }
}

// ----------------------------------------------------------

/* Using single mixin  */
.foo {
  @include font-size(14px);
}

/* Using single mixin  */
.bar {
  @include font-size(18px 1.3);
}

/* Using multi mixin  */
.foobar {
  @include font-sizes(24px 1.1);
}

/* Using multi mixin  */
.barbaz {
  @include font-sizes(14px 1.4, 16px);
}

/* Using multi mixin  */
.bazqux {
  @include font-sizes(18px 1.3, 24px 1.2, 32px 1.1);
}

SassMeister-output.css

/* Using single mixin  */
.foo {
  font-size: 14px;
  font-size: 0.875rem;
}

/* Using single mixin  */
.bar {
  line-height: 1.3;
  font-size: 18px;
  font-size: 1.125rem;
}

/* Using multi mixin  */
.foobar {
  line-height: 1.1;
  font-size: 24px;
  font-size: 1.5rem;
}

/* Using multi mixin  */
.barbaz {
  line-height: 1.4;
  font-size: 14px;
  font-size: 0.875rem;
}
@media (min-width: 481px) {
  .barbaz {
    font-size: 16px;
    font-size: 1rem;
  }
}

/* Using multi mixin  */
.bazqux {
  line-height: 1.3;
  font-size: 18px;
  font-size: 1.125rem;
}
@media (min-width: 481px) {
  .bazqux {
    line-height: 1.2;
    font-size: 24px;
    font-size: 1.5rem;
  }
}
@media (min-width: 769px) {
  .bazqux {
    line-height: 1.1;
    font-size: 32px;
    font-size: 2rem;
  }
}