Skip to content

Instantly share code, notes, and snippets.

@malithmcr
Last active September 12, 2016 12:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save malithmcr/37f2d50f84ab523f1a847cfff49ccc48 to your computer and use it in GitHub Desktop.
Save malithmcr/37f2d50f84ab523f1a847cfff49ccc48 to your computer and use it in GitHub Desktop.
@mixin responsive-font($responsive, $min, $max: false) {
$responsive-unitless: $responsive / ($responsive - $responsive + 1);
$dimension: if(unit($responsive) == 'vh', 'height', 'width');
$min-breakpoint: $min / $responsive-unitless * 100;
@media (max-#{$dimension}: #{$min-breakpoint}) {
font-size: $min;
}
@if $max {
$max-breakpoint: $max / $responsive-unitless * 100;
@media (min-#{$dimension}: #{$max-breakpoint}) {
font-size: $max;
}
}
font-size: $responsive;
}
//Usage
body{
@include responsive-font(2vw, 12px, 48px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment