Responsive font mixin

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

// 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 (array of) px value or px value followed by line height
@mixin font-sizes($font-settings-small,  $font-settings-medium: null, $font-settings-large: null) {
  // Font size on mobile (default)
  @include font-size($font-settings-small);
  
  // Font size on tablet
  @if $font-settings-medium {
    @media (min-width: #{$bp-m-l}) {
      @include font-size($font-settings-medium);
    }
  }
  
  // Font size on desktop
  @if $font-settings-large {
    @media (min-width: #{$bp-l-xl}) {
      @include font-size($font-settings-large);
    }
  }
}

.foo {
  @include font-size(20px);
}

.bar {
  @include font-size(20px 1.0);
}

.baz {
  @include font-sizes(20px 1.0);
}

p {
  @include font-sizes(14px 1.4, 16px);
}

h1 {
  @include font-sizes(18px 1.3, 24px 1.2, 32px 1.1);
}

SassMeister-output.css

.foo {
  font-size: 20px;
  font-size: 1.25rem;
}

.bar {
  line-height: 1;
  font-size: 20px;
  font-size: 1.25rem;
}

.baz {
  line-height: 1;
  font-size: 20px;
  font-size: 1.25rem;
}

p {
  line-height: 1.4;
  font-size: 14px;
  font-size: 0.875rem;
}
@media (min-width: 481px) {
  p {
    font-size: 16px;
    font-size: 1rem;
  }
}

h1 {
  line-height: 1.3;
  font-size: 18px;
  font-size: 1.125rem;
}
@media (min-width: 481px) {
  h1 {
    line-height: 1.2;
    font-size: 24px;
    font-size: 1.5rem;
  }
}
@media (min-width: 769px) {
  h1 {
    line-height: 1.1;
    font-size: 32px;
    font-size: 2rem;
  }
}