@mixin make-line-height($prefix: '.') {
  @each $name,
    $value
      in (
        '3': 0.75rem,
        '4': 1rem,
        '5': 1.25rem,
        '6': 1.5rem,
        '7': 1.75rem,
        '8': 2rem,
        '9': 2.25rem,
        '10': 2.5rem,
        'none': 1,
        'tight': 1.25,
        'snug': 1.375,
        'normal': 1.5,
        'relaxed': 1.625,
        'loose': 2
      )
  {
    #{$prefix}leading-#{$name} {
      line-height: $value;
    }
  }
}

@include make-line-height();
@each $deivce in map-keys($devices) {
  @include media-device($deivce) {
    @include make-line-height('.' + selector-escape($deivce + ':'));
  }
}

// hover ?