Manage app typography via a single mixin

typography.scss

$text-styles: (
    "site-title",
    "site-subtitle",
    "title-large",
    "title-medium",
    "body",
    "link-hover",
    "small",
);

@mixin text($name: null) {

  @if $name == null {
    @warn 'A name must be passed in; choose one of: #{$text-styles}';
  }

  @if index($text-styles, $name) {
    line-height: 1.2em;

    @if $name == 'site-title' {
      font-family: $font__slab;
      font-size: map-get($text-sizes, headerMedium);
      font-weight: 400;

      @include bp(layout-gt-xs) {
        font-size: map-get($text-sizes, small);
      }
    }

    @if $name == 'site-subtitle' {
      font-family: $font__slab;
      font-size: map-get($text-sizes, small);
      font-weight: 700;
      letter-spacing: .2em;

      @include bp(layout-gt-xs) {
        font-size: map-get($text-sizes, headerMedium);
        font-weight: 400;
      }
    }

    @if $name == 'title-large' {
      font-family: $font__slab;
      font-size: map-get($text-sizes, headerLarge);
      font-weight: 400;
    }

    @if $name == 'title-medium' {
      font-family: $font__slab;
      font-size: map-get($text-sizes, headerMedium);
      font-weight: 400;
    }

    @if $name == 'body' {
      font-family: $font__body;
      font-size: map-get($text-sizes, body);
      font-weight: 400;
    }

    @if $name == 'link' {
      font-family: $font__body;
      font-weight: 400;
    }

    @if $name == 'link-hover' {
      font-family: $font__body;
      font-weight: 400;
    }

    @if $name == 'small' {
      font-family: $font__body;
      font-size: map-get($text-sizes, small);
      font-weight: 400;
    }

  } @else {
    @warn 'There is no item "#{$name}" in this list; choose one of: #{$text-styles}';
  }
}

// Use:
.foo {
  @include text('body');
}