Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Fluid typography SASS mixin
$screen_min: 320px;
$screen_max: 1330px;
@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
@each $property in $properties {
#{$property}: $min-value;
}
@media (min-width: $min-vw) {
@each $property in $properties {
#{$property}: calc(
#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}
);
}
}
@media (min-width: $max-vw) {
@each $property in $properties {
#{$property}: $max-value;
}
}
}
// .text-large {
// @include fluid-type(font-size, $screen_min, $screen_max, 15px, 18px);
// @include fluid-type(line-height, $screen_min, $screen_max, 24px, 32px);
// }
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.