Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sass Mixin: Fluid Text
// fluidly resize type
// based on example here https://css-tricks.com/snippets/css/fluid-typography/
@mixin fluid-type($font-min, $font-max, $screen-min, $screen-max) {
font-size: #{$font-min}px;
@media only screen and (min-width: #{$screen-min}px) {
font-size: calc(
#{$font-min}px + #{($font-max - $font-min)} * (100vw - #{$screen-min}px) / (#{$screen-max} - #{$screen-min})
);
}
@media only screen and (min-width: #{$screen-max}px) {
font-size: #{$font-max}px;
}
}
.my-text {
@include fluid-type(16, 32, 480, 1500);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.