Text styling base variable and mixin reusing it
$font-sizes: (
xxxs: (fs:12px, lh:1.167),
xxs: (fs:14px, lh:1.21),
xs: (fs:17px, lh:1.235),
s: (fs:19px, lh:1.21),
m: (fs:21px, lh:1.19),
l: (fs:35px, lh:1.14),
xl: (fs:48px, lh:1.167),
xxl: (fs:100px, lh:1.18),
xxxl: (fs:110px, lh:0.735)
);
// Usage: @include t-font-basic-sizing(xs);
@mixin t-font-basic-sizing($sizename:m, $enable-additional-styling:true) {
font-size:map-get(map-get($font-sizes,$sizename),fs);
line-height:map-get(map-get($font-sizes,$sizename),lh);
// additional styling for some combinations
@if index((xs s), $sizename) and $enable-additional-styling == true {
font-weight:bold;
}
}