Skip to content

Instantly share code, notes, and snippets.

@ephys
Last active June 26, 2021 17:17
Show Gist options
  • Save ephys/8ed44503ce2d328462c2123e48f6da74 to your computer and use it in GitHub Desktop.
Save ephys/8ed44503ce2d328462c2123e48f6da74 to your computer and use it in GitHub Desktop.
// based on https://css-tricks.com/snippets/css/fluid-typography/
// This doesn't have to be limited to font-size! Go wild!
@function strip-unit($value) {
@return $value / ($value * 0 + 1);
}
@function fluid($min-vw, $max-vw, $min-size, $max-size) {
$u1: unit($min-vw);
$u2: unit($max-vw);
$u3: unit($min-size);
$u4: unit($max-size);
@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
@return max(#{$min-size}, min(#{$max-size}, calc(#{$min-size} + #{strip-unit($max-size - $min-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}))));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment