generate fontsize per breakpoint in scss

SassMeister-input-HTML.html

<section class="section">This is a Test!</section>

SassMeister-input.scss

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

$font-sizes: (
  (null, 14px, #000000),
  (1000px, 26px, #F9690E)
);

@mixin font-size($fs-map) {
  @each $val in $fs-map {
    $fs-breakpoint: nth($val, 1);
    $fs-font-size: nth($val, 2);
    $fs-font-color: nth($val, 3);
    
    @if $fs-breakpoint == null {
      font-size: $fs-font-size;
      @include font-color($fs-font-color);
    }
    @else {
      @media screen and (min-width: $fs-breakpoint) {
        font-size: $fs-font-size;
        @include font-color($fs-font-color);
      }
    }
  }
}

@mixin font-color($fs-font-color) {
  @if $fs-font-color {
    color: $fs-font-color;
  }
}

.section {
  background-color: #C8F7C5;
  font-family: Arial;
  padding: 30px;
  @include font-size($font-sizes);
}

SassMeister-output.css

.section {
  background-color: #C8F7C5;
  font-family: Arial;
  padding: 30px;
  font-size: 14px;
  color: #000000;
}

@media screen and (min-width: 1000px) {
  .section {
    font-size: 26px;
    color: #F9690E;
  }
}

SassMeister-rendered.html

<section class="section">This is a Test!</section>