Generated by SassMeister.com.
<h1>This should be a responsive heading title right here</h1> |
// ---- | |
// libsass (v3.2.5) | |
// ---- | |
@function strip-unit($number) { | |
@if type-of($number) == 'number' and not unitless($number) { | |
@return $number / ($number * 0 + 1); | |
} | |
@return $number; | |
} | |
@mixin responsive-text($min-font-size, $max-font-size, $min-screen-width, $max-screen-width) { | |
font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-screen-width}) / #{strip-unit($max-screen-width - $min-screen-width)})); | |
} | |
h1 { | |
@include responsive-text(20px, 60px, 600px, 1920px); | |
font-family: sans-serif; | |
} |
h1 { | |
font-size: calc(20px + 40 * ((100vw - 600px) / 1320)); | |
font-family: sans-serif; | |
} |
<h1>This should be a responsive heading title right here</h1> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment