Responsive Typography with Maps, and at-import/breakpoint

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@import "breakpoint";

$base-font-size: 16px;
$base-line-height: 22px;

// Strips units (From Foundation Zurb Base File)
@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

// Simple px to rem function
@function rem($px, $base: $base-font-size) {
  @return ($px / $base) * 1rem;
}

// Font resizes larger
@include add-breakpoint('type-large', 600px); 
@include add-breakpoint('type-huge', 1200px); 

// Responsive Typography Based on http://www.smashingmagazine.com/2015/06/responsive-typography-with-sass-maps/
// Modified to use REM & https://github.com/at-import/breakpoint
// Requires $BREAKPOINTS is the global map for breakpoint-sass mixin

@mixin font-size($fs-map, $fs-breakpoints: $BREAKPOINTS) {
  @each $fs-breakpoint, $fs-font-size in $fs-map {
    @if $fs-breakpoint == null {
      @include make-font-size($fs-font-size);
    } @else {
      // If $fs-font-size is a key that exists in
      // $fs-breakpoints, use the value
      @if map-has-key($fs-breakpoints, $fs-breakpoint) {
        $fs-breakpoint: map-get($fs-breakpoints, $fs-breakpoint);
      }

      @include breakpoint ($fs-breakpoint) {
        @include make-font-size($fs-font-size);
      }
    }
  }
}

// Utility function for mixin font-size
@mixin make-font-size($fs-font-size) {
  // If $fs-font-size is a list, include
  // both font-size and line-height
  @if type-of($fs-font-size) == 'list' {
    $fontsize: nth($fs-font-size, 1);
    // If a px unit convert to Rem
    @if (unit($fontsize) == 'px') {
        font-size: rem($fontsize);
    } @else {
        line-height: $fontsize;
    }
    @if (length($fs-font-size) > 1) {
      $lineheight: nth($fs-font-size, 2);
      @if (unit($lineheight) == 'px') {
        line-height: strip-unit($lineheight / $fontsize);
      } @else {
        line-height: $lineheight;
      }
    }
  } @else {
    font-size: $fs-font-size;
  }
}

$h1-font-sizes: (
  null: (28px, $base-line-height * 1.5),
  type-large: (38px, $base-line-height * 2),
  type-huge: (60px, $base-line-height * 3),
);

h1 {
  @include font-size($h1-font-sizes);
}

h2{
  @include font-size($h2-font-sizes);
}

SassMeister-output.css

h1 {
  font-size: 1.75rem;
  line-height: 1.17857;
}

@media (min-width: 600px) {
  h1 {
    font-size: 2.375rem;
    line-height: 1.15789;
  }
}