A mixin that applies typographic styles from a map

_mixins.scss

// A mixin that allows to apply typographic styles from a map
// Supports applying a typographic style responsively, based on a map of media queries in a $breakpoints variable
@mixin u-set-typography($typeface-name: 'body', $style-name: 'regular') {
  
  $this-typeface: map-get($font-styles, $typeface-name);
  $this-style: map-get($this-typeface, $style-name);
  
  @if $typeface-name == 'body' {
    font-family: $font-body; 
  }

  @each $property, $value in $this-style {
    $is-breakpoint: variable-exists('breakpoints') and map-has-key($breakpoints, $property) and type-of($value) == 'map';

    @include u-set-breakpoint(if($is-breakpoint, $property, null)) {
      @if $is-breakpoint {
        @each $subproperty, $subvalue in $value {
          #{$subproperty}: $subvalue;
        }
      } @else {
        #{$property}: $value;
      }
    }
  }
}

@mixin u-set-breakpoint($breakpoint: null) {
  @if ($breakpoint and variable-exists('breakpoints') and map-has-key($breakpoints, $breakpoint)) {
    // if we use something like sass-mq we can replace this with package-specific mixin
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @content;
  }
}

_typography.scss

// A map containing the typography styles for a project
// 2nd level of the map (body-font) corresponds to the main typefaces.
// 3rd level of the map corresponds to a typography style which is a group of font properties that frequently go together. Any arbitrary word goes as a group name. The properties are usually font-size and line-height but can be also any other. 
// 4th level of the map may be a media query name if there is a $breakpoints map variable containing min-width based media queries.
// Usage: @include u-set-typography($typeface, $style-name); 
// E.g.: @include u-set-typography('body-font', 'paragraph-text'); 
$typographic-styles: (
  
  body-font: ( // eg. Open Sans
    paragraph-text: (
      font-size: 16px,
      line-height: 1.5,
      medium: (
        font-size: 18px,
        line-height: 1.4
      )
    ),
    text-banner-heading: (
      font-size: 42px,
      line-height: 1.2,
      font-weight: bold
    ),
  ),
);