Snippet for a mixin that makes organizing typography a bit easier

typography.scss

$typeography: (
  'small': (
    'font-size': 1.4rem,
    'line-height': 100%,
    'letter-spacing': 2%
  ),
  'medium': (
    'font-size': 2rem,
    'line-height': 150%,
    'letter-spacing': 2%,
   ),
);

// @mixin that takes a key value prop and returns all the CSS props associated with it!
@mixin text-style($clsName) {
  $cls: map-get($map: $typeography, $key: $clsName)
  @each $prop, $value in $cls {
    #{$prop}: $value;
  }
}

// how to use 👇
.test {
  @include text-style('medium');
  color: red;
}