Skip to content

Instantly share code, notes, and snippets.

@topaxi
Created September 6, 2016 14:31
Show Gist options
  • Save topaxi/ec94efe135d893e4c5962b8f4c8a72d0 to your computer and use it in GitHub Desktop.
Save topaxi/ec94efe135d893e4c5962b8f4c8a72d0 to your computer and use it in GitHub Desktop.
Responsive CSS font-size in SASS
@mixin responsive-font-size($min-size, $max-size, $min-break, $max-break) {
font-size: calc(
#{$min-size} + #{strip-units($max-size - $min-size)} *
((100vw - #{$min-break}) / #{strip-units($max-break - $min-break)})
);
@media screen and (max-width: $min-break) {
& {
font-size: $min-size;
}
}
@media screen and (min-width: $max-break) {
& {
font-size: $max-size;
}
}
}
// This is more a hack than anything else, how would one do this properly?
@function strip-units($value) {
@return $value / ($value * 0 + 1);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment