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};
}
}
}