Generated by SassMeister.com.

SassMeister-input.scss

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

$breakpoints: (
  small : 570px,
  medium: 800px,
  large : 1030px
);



$typography: ( // <-- config

  body: ( // <-- category
    'micro': ( // <-- size
      null  : (18px, 1.5),  // <-- breakpoint: (group)
      small : 19px,
      medium : 20px,
      large : 21px,
    ),
    'mini': (
      null  : (15px, 24px),
      small : 16px,
      medium: 17px,
      large : 19px,
    )
  ),
  
  display: (
    'mega': (
      null  : 18px,
      small : 19px,
      medium : 20px,
      large : 21px,
      1140px: 36px,
      1280px: 38px
    ),
    'giga': (
      null  : (15px, 1.5),
      small : 16px,
      medium: 17px,
      large : 19px,
    )
  )
  
) !default;



@function fetch-category-from-config($config, $category) {
  @if ( map-has-key($config, $category) ) {
    @return map-get($config, $category);
  } @else {
    @error "No category by the value of '#{$category}' exists in the typography config";
  }
}

@function fetch-group-from-category($category, $group) {
  @if ( map-has-key($category, $group) ) {
    @return map-get($category, $group);
  } @else {
    @error "No size by the name of '#{$group}' exists in the typography config";
  }
}

@function fetch-group-from-breakpoint($breakpoint, $group) {
  @if ( map-has-key($group, $breakpoint) ) {
    @return map-get($group, $breakpoint);
  } @else {
    @error "No breakpoint by the name of '#{$breakpoint}' exists in the typography config";
  }  
};

@function fetch-font-size-from-group($group, $breakpoint) {
  $group: fetch-group-from-breakpoint($breakpoint, $group);
  @if type-of($group) == "list" {
    @return nth($group, 1);
  }
  @if type-of($group) == "number" {
    @return $group;
  }
  @else {
    @error "No breakpoint by the name of '#{$breakpoint}' exists in the typography config";
  }
}

@function fetch-line-height-from-group($group, $breakpoint) {
  $group: fetch-group-from-breakpoint($breakpoint, $group);
  @if type-of($group) == "list" {
    @return nth($group, 2);
  }
  @else {
    @error "Line height for the desired property does not exist at the '#{$breakpoint}' breakpoint";
  }
}



@function fs($size, $category, $breakpoint:null, $map:$typography) {
  @if type-of($map) != map {
    @error "The passed param #{$map} is not a map.";
  }
  
  $category: fetch-category-from-config($map, $category);
  $group: fetch-group-from-category($category, $size);
  $font-size: fetch-font-size-from-group($group, $breakpoint);
  
  @return $font-size;
  
}


@function lh($size, $category, $breakpoint:null, $map:$typography) {
  @if type-of($map) != map {
    @error "The passed param #{$map} is not a map.";
  }
  
  $category: fetch-category-from-config($map, $category);
  $group: fetch-group-from-category($category, $size);
  $line-height: fetch-line-height-from-group($group, $breakpoint);
  
  @return $line-height;
  
}






@mixin make-font-size($font-size) {
  @if type-of($font-size) == "list" {
    font-size: nth($font-size, 1);
    @if (length($font-size) > 1) {
      line-height: nth($font-size, 2);
    }
  }
  @else {
    font-size: $font-size;
  }
}


@mixin make-responsive-markup($breakpoint, $values) {
  @media screen and (min-width: $breakpoint) {
    @include make-font-size($values);
  }
}


@mixin set-font-scale($size, $category, $map:$typography) {
  $category: fetch-category-from-config($map, $category);
  $group: fetch-group-from-category($category, $size);
  
  @each $breakpoint, $values in $group {
    
    @if $breakpoint == null { // If no breakpoint use default value
      @include make-font-size($values);
    }
    
    @if type-of($breakpoint) == "number" { // If breakpoint manually specified use that
      @include make-responsive-markup($breakpoint, $values)
    }
    
    @if global-variable-exists(breakpoints) {
      @if map-has-key($breakpoints, $breakpoint) { // If size exists in breakpoint map use that
        $breakpoint: map-get($breakpoints, $breakpoint);
        @include make-responsive-markup($breakpoint, $values);
      }
    }

    
  }
}



body {
  font-size: fs(micro, body, small);
  line-height: lh(mini, body);
}

h1 {
  font-size: fs(mega, display, 1140px);
}

h2 {
  @include set-font-scale(mega, display);
}

SassMeister-output.css

body {
  font-size: 19px;
  line-height: 24px;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 18px;
}

@media screen and (min-width: 570px) {
  h2 {
    font-size: 19px;
  }
}

@media screen and (min-width: 800px) {
  h2 {
    font-size: 20px;
  }
}

@media screen and (min-width: 1030px) {
  h2 {
    font-size: 21px;
  }
}

@media screen and (min-width: 1140px) {
  h2 {
    font-size: 36px;
  }
}

@media screen and (min-width: 1280px) {
  h2 {
    font-size: 38px;
  }
}