cristinafsanz
7/17/2019 - 3:06 PM

Benkoletter #5: Final implementation

Benkoletter #5: Final implementation

// typography
$typos: (
  display-20-size: 36px,
  display-20-weight: 100,
  title-20-size: 17px,
  title-20-weight: 600,
  body-20-size: 15px,
  body-20-weight: 400,
  body-20-weight-bold: 700,
  body-10-size: 13px,
  body-10-weight: 400,
  body-10-weight-bold: 700,
  // etc
);

@mixin typography($which) {
  $size: map-get($typos, #{$which}-size);
  $weight: map-get($typos, #{$which}-weight);
  $weight-bold: map-get($typos, #{$which}-weight-bold);

  font-size: #{$size};
  font-weight: #{$weight};

  @if $weight-bold {
    & b,
    & strong {
      font-weight: #{$weight-bold};
    }
  }
}