/* typing */ @each $name, $value in $font-weights { .font-w-#{'' + $name}, %font-w-#{'' + $name} { font-weight: #{$value}; } } @each $name, $value in $font-sizes { .font-s-#{'' + $name}, %font-s-#{'' + $name} { font-size: #{$value}; } } @each $name, $value in $font-sizes { .line-height-#{'' + $name}, %line-height-#{'' + $name} { line-height: line-height($value); } } .bold, %bold { @extend %font-w-bold; } /** only works with lang attribute in */ .hyphenate, %hyphenate { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .ellipsis, %ellipsis { display: block; overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .text, %text { @extend %margin-0; @extend %hyphenate; font-size: $font-size-default; line-height: line-height($font-size-default); &--right { text-align: right; } &--left { text-align: left; } &--center { text-align: center; } &-gradient { display: inline-block; background: $fluid-light; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } &-fineprint { @extend %margin-0; @extend %hyphenate; font-size: $font-size-sm; line-height: line-height($font-size-sm); } }