Deklarovanie veľkostí písma v jednotkách výrezu môže priniesť skutočne zaujímavé výsledky, ale prichádza s výzvami. V CSS nie sú žiadne vlastnosti min-font-sizealebo max-font-sizevlastnosti, takže s okrajovými prípadmi, keď je text príliš malý alebo príliš veľký, sa dá ťažko vysporiadať.
Tento mix Sass využíva mediálne dotazy na definovanie minimálnej a maximálnej veľkosti písma v pixeloch. Podporuje tiež voliteľný parameter, ktorý slúži ako náhrada pre prehliadače, ktoré nepodporujú jednotky výrezu.
Napríklad takto definujete písmo s 5vwobmedzením medzi 35pxa 150px(s rezervou 50pxpre nepodporujúce prehliadače):
@include responsive-font(5vw, 35px, 150px, 50px);A tu je celý mixin:
/// /// Viewport sized typography with minimum and maximum values /// /// @author Eduardo Boucas (@eduardoboucas) /// /// @param (Number) $responsive - Viewport-based size /// @param (Number) $min - Minimum font size (px) /// @param (Number) $max - Maximum font size (px) /// (optional) /// @param (Number) $fallback - Fallback for viewport- /// based units (optional) /// /// @example scss - 5vw font size (with 50px fallback), /// minumum of 35px and maximum of 150px /// @include responsive-font(5vw, 35px, 150px, 50px); /// @mixin responsive-font($responsive, $min, $max: false, $fallback: false) ( $responsive-unitless: $responsive / ($responsive - $responsive + 1); $dimension: if(unit($responsive) == 'vh', 'height', 'width'); $min-breakpoint: $min / $responsive-unitless * 100; @media (max-#($dimension): #($min-breakpoint)) ( font-size: $min; ) @if $max ( $max-breakpoint: $max / $responsive-unitless * 100; @media (min-#($dimension): #($max-breakpoint)) ( font-size: $max; ) ) @if $fallback ( font-size: $fallback; ) font-size: $responsive; )Ukážka
Prezrite si typografiu veľkosti pera Viewport s minimálnymi a maximálnymi veľkosťami od Eduarda Bouçasa (@eduardoboucas) na stránke CodePen.