Skip to content

Instantly share code, notes, and snippets.

@sveetch
Last active December 12, 2015 04:18
Show Gist options
  • Save sveetch/4713721 to your computer and use it in GitHub Desktop.
Save sveetch/4713721 to your computer and use it in GitHub Desktop.
A simple SCSS mixin to compute font size for each breakpoint.
// Strip unit from a number value
// Usage :
// strip-units(16px);
// Will return "16" (as a number)
@function strip-units($number) {
@return $number / ($number * 0 + 1);
}
// Write font-size rules for each given breakpoint, the font-size is calculated for each
// breakpoint
//
// Usage :
// $resos: $screenSmall, $screenMedium, $screenXlarge;
// @include fit-text(5.2px, $resos);
//
// * $base-size: base size to use in calcul;
// * $resolutions: list of breakpoint width sizes to break on;
// * $default-size: default width size to use for the default property;
// * $min-size: minimal font size value, if a computed value is higher, the minimal
// value is used instead;
// * $ratio: use ratio in calcul with the base-size
// * $unit: the unit to use in the font-size property, must be like "1px" or "1em" etc..
@mixin fit-text($base-size, $resolutions, $default-width: 1920, $min-size: 0, $ratio: 0.0075, $unit: 1px) {
font-size: $base-size*($default-width * $ratio);
@each $breakpoint-item in $resolutions {
$thisFontSize : strip-units($base-size*(strip-units($breakpoint-item)*$ratio));
@media (max-width: $breakpoint-item - 1) {
@if $thisFontSize > $min-size {
font-size: $thisFontSize*$unit;
} @else {
font-size: $min-size*$unit;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment