SASS font-size and color via sass-map in breakpoints

input.scss

// ----
// Sass (v3.4.25)
// Compass (v1.0.3)
// ----

$h1-fontsize: (
  null: (
    size: 26px
  ),
  '768px': (
    size: 50px
  )
);

$h2-fontsize: (
  null: (
    size: 22px,
    color: null
  ),
  '768px': (
    size: 27px,
    color: red
  )
);

@mixin fontcolor($color) {
  @if $color {
    color: $color;
  }
}

@mixin fontsize($fs-map) {

  @each $breakpoints, $settings in $fs-map {
    $size: map-get($settings, 'size');
    $color: map-get($settings, 'color');

    @if $breakpoints == null {
      @include fontcolor($color);
      font-size: $size;
    } @else {
      @media screen and (min-width: $breakpoints) {
        @include fontcolor($color);
        font-size: $size;
      }
    }
  }
}

h1 {
  @include fontsize($h1-fontsize);
}

h2 {
  @include fontsize($h2-fontsize);
}

output.css

h1 {
  font-size: 26px;
}
@media screen and (min-width: 768px) {
  h1 {
    font-size: 50px;
  }
}

h2 {
  font-size: 22px;
}
@media screen and (min-width: 768px) {
  h2 {
    color: red;
    font-size: 27px;
  }
}