Skip to content

Instantly share code, notes, and snippets.

@brayhoward
Forked from italodr/mixin-fluid-typography.scss
Created September 11, 2017 21:57
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 brayhoward/19c7a76e945903795d1707ffa19eb0eb to your computer and use it in GitHub Desktop.
Save brayhoward/19c7a76e945903795d1707ffa19eb0eb to your computer and use it in GitHub Desktop.
A mixin for Mike Riethmuller fluid typography
@mixin fluid-type($min-font-size, $max-font-size, $min-vw: 480px, $max-vw: 1200px) {
$u1: unit($min-vw);
$u2: unit($max-vw);
$u3: unit($min-font-size);
$u4: unit($max-font-size);
@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
font-size: $min-font-size;
@if $min-vw != $max-vw {
@media only screen and (min-width: $min-vw) {
font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
}
}
@media only screen and (min-width: $max-vw) {
font-size: $max-font-size;
}
}
@else {
@error"Detected mixed units. Please use the same units for all parameters.";
}
}
@function strip-unit($number) {
@return $number / ($number * 0 + 1);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment