Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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