Use Font mixin
@mixin use-font()
Helper mixin for the fonts attributes
Parameters & Output
$font-size: (Keyword)
Target font: display, headline, title, subheading, body, button, caption.
$font-weight: (Keyword)
Target weight: bold, regular, light.
{CSS output} (code block)
font-size, font-weight and the line-height of the current font-size.
Example
scss
.block-title {
@include use-font('title', 'regular');
}
.block-display {
@include use-font('display', 'light');
}
css
compiled
.block-title {
font-size: 21px;
font-weight: 400;
line-height: 29px;
}
.block-display {
font-size: 72px;
font-weight: 300;
line-height: 80px;
}